Alan
20 Jun 2009, 09:17 PM
Why oh why doesn't Javascript return error messages with a reason? Would definitely make things easier. I can't get this to work... :(
I want to select the different inputs based on the value in the select box. I just can't seem to get it working. (There will be only 2 values in the select box).
Here's my attempt at it.
<!-- Head section -->
<script language="Javascript">
function switch_form() {
var form1 = document.getElementByID('form1');
var form2 = document.getElementByID('form2');
if(form1.style.display == "none") {
form1.style.display = "inline";
form2.style.display = "none";
}
else {
form2.style.display = "inline";
form1.style.display = "none";
}
}
</script>
<!-- Body section -->
<form method="post" action="">
<div>Form selection</div>
<div><select name="select" onChange="switch_form()">
<option value="form1">Form 1</option>
<option value="form2">Form 2</option>
</select></div>
<div id="form1" style="display: inline;">
<div>Label 1</div>
<div><input type="text" name="input1" size="10" value=""/></div>
</div>
<div id="form2" style="display: none;">
<div>Label 2</div>
<div><input type="text" name="input2" size="10" value=""/></div>
</div>
</form>
Maybe I could use an onClick event handler in the select box's options? Just a thought. Thanks in advance for any help, this has been a thorn in my side for many an hour. :)
I want to select the different inputs based on the value in the select box. I just can't seem to get it working. (There will be only 2 values in the select box).
Here's my attempt at it.
<!-- Head section -->
<script language="Javascript">
function switch_form() {
var form1 = document.getElementByID('form1');
var form2 = document.getElementByID('form2');
if(form1.style.display == "none") {
form1.style.display = "inline";
form2.style.display = "none";
}
else {
form2.style.display = "inline";
form1.style.display = "none";
}
}
</script>
<!-- Body section -->
<form method="post" action="">
<div>Form selection</div>
<div><select name="select" onChange="switch_form()">
<option value="form1">Form 1</option>
<option value="form2">Form 2</option>
</select></div>
<div id="form1" style="display: inline;">
<div>Label 1</div>
<div><input type="text" name="input1" size="10" value=""/></div>
</div>
<div id="form2" style="display: none;">
<div>Label 2</div>
<div><input type="text" name="input2" size="10" value=""/></div>
</div>
</form>
Maybe I could use an onClick event handler in the select box's options? Just a thought. Thanks in advance for any help, this has been a thorn in my side for many an hour. :)