I have a form with several select boxes. On the last box, I need two things to happen: First, when an option is selected, the Submit button gets enabled (disabled by default). Second is that if one specific option is selected, a hidden field is shown.
I had this working perfectly using onChange for the select to enable the submit button and an onClick on the option to show the hidden field. Later I found that the onClick doesn't work in IE.
Now I've created a function that will show the hidden field if the correct option is selected, but it runs onLoad in the body tag. When that's in there, the onChange function doesn't fire. If I add the hidden field function to the onChange along with the show submit function, the show submit function works, but the show hidden field function only works if I select the desired option, select another option, then select the desired option again. This last problem seems like it should be easy to fix but I don't know how.
Here are the functions I'm using:
And here is the form:
I had this working perfectly using onChange for the select to enable the submit button and an onClick on the option to show the hidden field. Later I found that the onClick doesn't work in IE.
Now I've created a function that will show the hidden field if the correct option is selected, but it runs onLoad in the body tag. When that's in there, the onChange function doesn't fire. If I add the hidden field function to the onChange along with the show submit function, the show submit function works, but the show hidden field function only works if I select the desired option, select another option, then select the desired option again. This last problem seems like it should be easy to fix but I don't know how.
Here are the functions I'm using:
Code:
function enable_submit(obj) {
var sb = document.getElementById("Submit");
sb.disabled = false;
}
function show_comment() {
var eSelect = document.getElementById('f2');
var optComment = document.getElementById('more');
eSelect.onchange = function show_comment() {
if(eSelect.selectedIndex === 1) {
optComment.style.display = 'block';
} else {
optComment.style.display = 'none';
}
}
}And here is the form:
Code:
<body onLoad="show_comment();">
<form action="form.php" method="post">
Field 1: <select name="f1" id="f1">
<option value="">Please select:</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select><br />
Field 2: <select name="f2" id="f2" onChange="enable_submit(this);">
<option value="">Please select:</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select><br />
<div id="more" style="display: none;" >
More info: <input type="text" name="comment" id="comment" />
</div>
<input type="submit" name="Submit" id="Submit" value="Submit" disabled="disabled">
</form>
</body>