methnen
10-02-2006, 02:36 AM
OK, here is some messy not beautiful I'm sure javascript I've been working on today:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OSA Form Stuff</title>
<script type="text/javascript">
// Show something
function show(name)
{
var show_div = document.getElementById(name);
show_div.setAttribute("style", "");
}
// Hide something
function hide(name)
{
var hide_div = document.getElementById(name);
hide_div.setAttribute("style", "display: none;");
}
// Show or hide something as a toggle
function show_hide_toggle(name)
{
var element = document.getElementById(name);
var current_state = element.getAttribute("style");
if(current_state == "")
{
element.setAttribute("style", "display: none;");
}
else
{
element.setAttribute("style", "");
}
}
// Add or remove checkbox value to the target
function checkbox_handler(target_name, checkbox_name)
{
// Get current value of the target
var element = document.getElementById(target_name);
var element_value = element.value;
// Get current value of the checkbox
var checkbox = document.getElementById(checkbox_name);
var checkbox_value = checkbox.value;
var new_value = '';
var exists = false;
if(element_value != '')
{
// Split target value into an array
var element_value_array = new Array();
element_value_array = element_value.split('\n');
var value_numbers = (element_value_array.length - 1);
for (var count = 0 ; count < value_numbers; count++)
{
working_value = element_value_array[count];
if(checkbox_value != working_value)
{
new_value = new_value + working_value + '\n';
}
else
{
exists = true;
}
}
}
if(exists == false && checkbox_value != '')
{
new_value = new_value + checkbox_value + '\n';
}
document.getElementById(target_name).value = new_value;
}
function other_field_handler(target_name, checkbox_name, final_target)
{
var original = document.getElementById(checkbox_name);
document.getElementById(target_name).value = original.value;
checkbox_handler(final_target, target_name);
original.setAttribute('readonly', 'readonly');
}
function clear_other_field(name, checkbox_name)
{
var other_field = document.getElementById(name);
other_field.value = ''
other_field.removeAttribute('readonly');
document.getElementById(checkbox_name).value = '';
}
window.onload = function() {
drop_down();
}
</script>
</head>
<body>
<p>
<strong><span style="color: red;">*</span> 7. Have you ever sought out academic advising?</strong><br />
<input type="radio" name="academic_advising" value="Yes" onclick="show('show_academic_advising');" /> Yes
<input type="radio" name="academic_advising" value="No" onclick="hide('show_academic_advising');" /> No
</p>
<p id="show_academic_advising" style="display: none;">
<strong>7a. If yes, from whom? (check all that apply).</strong><br />
<input type="checkbox" name="aa_option_1" value="Academic Advisor" id="aa_option_1" onclick="checkbox_handler('academic_advising_who', 'aa_option_1');" /> Academic Advisor<br />
<input type="checkbox" name="aa_option_2" value="Graduate Student" id="aa_option_2" onclick="checkbox_handler('academic_advising_who', 'aa_option_2');" /> Graduate Student<br />
<input type="checkbox" name="aa_option_3" value="Faculty" id="aa_option_3" onclick="checkbox_handler('academic_advising_who', 'aa_option_3');" /> Faculty<br />
<input type="checkbox" name="aa_option_4" value="Peer Monitor" id="aa_option_4" onclick="checkbox_handler('academic_advising_who', 'aa_option_4');" /> Peer Monitor<br />
<input type="checkbox" name="aa_option_5" value="" id="aa_option_5" onclick="show_hide_toggle('aa_other'); checkbox_handler('academic_advising_who', 'aa_option_5'); clear_other_field('aa_other', 'aa_option_5')" /> Other
<input type="text" name="aa_other" value="" id="aa_other" style="display: none;" size="23" onchange="other_field_handler('aa_option_5', 'aa_other', 'academic_advising_who');" />
<br /><br /><br /><textarea name="academic_advising_who" rows="8" cols="40" id="academic_advising_who"></textarea>
</p>
</body>
</html>
Thats a working page.
Anyway the whole things works beautifully in Firefox and Safari but I've been unable to get portions to work in IE 6 and I can't for the life of me figure out why.
First the Yes or No buttons should be showing or hiding a question underneath.
That part won't do anything in IE. At first I thought maybe IE wasn't passing the id in the onclick event to the function. But I used some alert(); functions to check that and it was. But for some reason IE wouldn't do the style change.
The other piece can be seen by removing the style="display: none;" bit and then clicking on some of the checkboxes. Unchecking a checkbox should remove it from the textarea below. Again no issue in Firefox and Safari. However IE doesn't remove it it just adds another one. :)
I spent a half hour putting alert(); functions all over to see what was going on but I can't figure out what is wrong. I do a comparison between the value of the checkbox against the value of each line in the textarea to see if it already exists in the textarea. From what I can tell the values are identical in IE just the same as Firefox but when they get compared by IE it obviously comes to conclusion that they aren't.
Any nudges in the right direction or outright help to this admitted javascript newbie would be greatly appreciated. :)
Jamie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OSA Form Stuff</title>
<script type="text/javascript">
// Show something
function show(name)
{
var show_div = document.getElementById(name);
show_div.setAttribute("style", "");
}
// Hide something
function hide(name)
{
var hide_div = document.getElementById(name);
hide_div.setAttribute("style", "display: none;");
}
// Show or hide something as a toggle
function show_hide_toggle(name)
{
var element = document.getElementById(name);
var current_state = element.getAttribute("style");
if(current_state == "")
{
element.setAttribute("style", "display: none;");
}
else
{
element.setAttribute("style", "");
}
}
// Add or remove checkbox value to the target
function checkbox_handler(target_name, checkbox_name)
{
// Get current value of the target
var element = document.getElementById(target_name);
var element_value = element.value;
// Get current value of the checkbox
var checkbox = document.getElementById(checkbox_name);
var checkbox_value = checkbox.value;
var new_value = '';
var exists = false;
if(element_value != '')
{
// Split target value into an array
var element_value_array = new Array();
element_value_array = element_value.split('\n');
var value_numbers = (element_value_array.length - 1);
for (var count = 0 ; count < value_numbers; count++)
{
working_value = element_value_array[count];
if(checkbox_value != working_value)
{
new_value = new_value + working_value + '\n';
}
else
{
exists = true;
}
}
}
if(exists == false && checkbox_value != '')
{
new_value = new_value + checkbox_value + '\n';
}
document.getElementById(target_name).value = new_value;
}
function other_field_handler(target_name, checkbox_name, final_target)
{
var original = document.getElementById(checkbox_name);
document.getElementById(target_name).value = original.value;
checkbox_handler(final_target, target_name);
original.setAttribute('readonly', 'readonly');
}
function clear_other_field(name, checkbox_name)
{
var other_field = document.getElementById(name);
other_field.value = ''
other_field.removeAttribute('readonly');
document.getElementById(checkbox_name).value = '';
}
window.onload = function() {
drop_down();
}
</script>
</head>
<body>
<p>
<strong><span style="color: red;">*</span> 7. Have you ever sought out academic advising?</strong><br />
<input type="radio" name="academic_advising" value="Yes" onclick="show('show_academic_advising');" /> Yes
<input type="radio" name="academic_advising" value="No" onclick="hide('show_academic_advising');" /> No
</p>
<p id="show_academic_advising" style="display: none;">
<strong>7a. If yes, from whom? (check all that apply).</strong><br />
<input type="checkbox" name="aa_option_1" value="Academic Advisor" id="aa_option_1" onclick="checkbox_handler('academic_advising_who', 'aa_option_1');" /> Academic Advisor<br />
<input type="checkbox" name="aa_option_2" value="Graduate Student" id="aa_option_2" onclick="checkbox_handler('academic_advising_who', 'aa_option_2');" /> Graduate Student<br />
<input type="checkbox" name="aa_option_3" value="Faculty" id="aa_option_3" onclick="checkbox_handler('academic_advising_who', 'aa_option_3');" /> Faculty<br />
<input type="checkbox" name="aa_option_4" value="Peer Monitor" id="aa_option_4" onclick="checkbox_handler('academic_advising_who', 'aa_option_4');" /> Peer Monitor<br />
<input type="checkbox" name="aa_option_5" value="" id="aa_option_5" onclick="show_hide_toggle('aa_other'); checkbox_handler('academic_advising_who', 'aa_option_5'); clear_other_field('aa_other', 'aa_option_5')" /> Other
<input type="text" name="aa_other" value="" id="aa_other" style="display: none;" size="23" onchange="other_field_handler('aa_option_5', 'aa_other', 'academic_advising_who');" />
<br /><br /><br /><textarea name="academic_advising_who" rows="8" cols="40" id="academic_advising_who"></textarea>
</p>
</body>
</html>
Thats a working page.
Anyway the whole things works beautifully in Firefox and Safari but I've been unable to get portions to work in IE 6 and I can't for the life of me figure out why.
First the Yes or No buttons should be showing or hiding a question underneath.
That part won't do anything in IE. At first I thought maybe IE wasn't passing the id in the onclick event to the function. But I used some alert(); functions to check that and it was. But for some reason IE wouldn't do the style change.
The other piece can be seen by removing the style="display: none;" bit and then clicking on some of the checkboxes. Unchecking a checkbox should remove it from the textarea below. Again no issue in Firefox and Safari. However IE doesn't remove it it just adds another one. :)
I spent a half hour putting alert(); functions all over to see what was going on but I can't figure out what is wrong. I do a comparison between the value of the checkbox against the value of each line in the textarea to see if it already exists in the textarea. From what I can tell the values are identical in IE just the same as Firefox but when they get compared by IE it obviously comes to conclusion that they aren't.
Any nudges in the right direction or outright help to this admitted javascript newbie would be greatly appreciated. :)
Jamie