PDA

Click to See Complete Forum and Search --> : Checkbox onclick

jazza_2000
04-24-2003, 08:08 AM
Hello folks,

I have a form with a checkbox as the first part and I need the second part of the form to be different depending on whether this checkbox is checked or not. Is it possible to dynamically change the second part on-the-fly and how?

If the checkbox is checked then I need part two of the form to be a dropdown menu, if it is not checked then the second part must be a radio selection. Can I make the second part of the form switch from one type to the other as a user checks and unchecks the checkbox?

Thanks for your help.

J2

If Pt.1 unchecked = Pt.2 radio selection
If Pt.1 checked = pt.2 dropdown
Jona
04-24-2003, 09:44 AM
This can be done with the DOM (Document Object Model) using Nodes, but I think that innerHTML will work...

if(document.myForm.myCheckbox.checked){
document.getElementById("a_div_inside_of_the_form").innerHTML="<input type=radio name='someName' value='blah'><br>The rest of your html here";
}
else {
document.getElementById("a_div_inside_of_the_form").innerHTML="<input type=radio name='someName' value='someValue'><br>The rest of your html and/or form here";
}

And in your form:

<form name="myForm">
<input type=checkbox name="myCheckbox"><br>
<div id="a_div_inside_of_the_form"><input type=radio name="someName" value="myValue"></div>
</form>
jazza_2000
04-24-2003, 10:16 AM
Thx Jona!

I'll have pop at this and let you know how I get on..
jazza_2000
04-24-2003, 10:38 AM
Hi everyone, I got this complete so here is a complete test page just in case anyone needs it in the future (let me know if you see anything that may cause a problem, I have only tested in IE6)...:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>

<style>
#form_option_1 { position: absolute; left: 580px; visibility: visible; z-index: 3 }
#form_option_2 { position: absolute; left: 580px; visibility: hidden; z-index: 3 }
</style>

<SCRIPT LANGUAGE="JavaScript">

performOnchange = true
if (document.all) {
docObj = "document.all."
styleObj = ".style"
} else {
docObj = "document."
styleObj = ""
}

function selectSub(cat) {
if (performOnchange == true) {
if(yes_no_checkbox1.checked) {
popupselect = eval(docObj + "form_option_1" + styleObj)
popupselect.visibility = "hidden"
popupselect = eval(docObj + "form_option_2" + styleObj)
popupselect.visibility = "visible"
} else {
popupselect = eval(docObj + "form_option_2" + styleObj)
popupselect.visibility = "hidden"
popupselect = eval(docObj + "form_option_1" + styleObj)
popupselect.visibility = "visible"
}
}
}
// End -->
</script>
</HEAD>
<BODY>
<div align="center">
<span id="form_option_1">
1.<input type=radio name=test value=1>
2.<input type=radio name=test value=2>
3.<input type=radio name=test value=3>
4.<input type=radio name=test value=4>
</span>
<span id="form_option_2">
<select name="no">
<option selected value="">- Please select -
<option value="1">option 1
<option value="2">option 2
<option value="3">option 3
<option value="4">option 4
</select>
</span>
<input type=checkbox name="yes_no_checkbox1" onclick="selectSub()">
</div>
</body>
</html>
caroldhn
04-24-2003, 11:56 AM
thankyou for pointing it out. However, I don't know how to modify it to make it work. Do you have any idea? Also, do you know where I can access to a complete JavaScript documentation?

Thank you,
CN
Jona
04-24-2003, 12:05 PM
thankyou for pointing it out. However, I don't know how to modify it to make it work. Do you have any idea?

Learning from other's questions, eh? That's good! Save me a post, one day.. :p

Anyways, the only way to do this would be in newer DOM-compliant browsers (or innerHTML is the method chosen in this case). So, re-putting your question... You just want to learn more about this?