Forum Moderators: open
I have a HTML form which has one or more select elements in it. The form is submitted through a link which calls the submit() method for the form. Now if there are at least two selects in the form, there is no problem. However, when there is only one select, the change by the user to that select is not picked up when the form is submitted. For example, the select element has options "Y" and "N" with "Y" selected. If the user changes it from "Y" to "N" and clicks the link to submit the form, the value of the select element stays "Y".
Thanks for any help.
<select name="test">
<option />Y
<option />N
</select>
<select name="test1">
<option value="Y" />Y
<option value="N" />N
</select>
Both should do the same thing, returning Y or N depending on the selection. There is no issue with multiple or single select menus in a form, as long as they have different "name"s.
<html>
<script language="JavaScript">
function showValue(index) {
alert("Flag " + index + " is: " + document.forms[0].disableFlag[index].value);
return true;
}
</script>
<body>
<form name="subActionForm" method="post" action="">
<select name="disableFlag" onchange="showValue(0);">
<option selected value="N">N</option>
<option value="Y">Y</option>
</select>
</table>
</form>
</body>
</html>
When you change the selection from "N" to "Y", the alert tells you the value is still "N". But if you add the following right after the first select:
<select name="disableFlag" onchange="showValue(1);">
<option selected value="N">N</option>
<option value="Y">Y</option>
</select>
then you get the proper alert when changing values.
Thanks for any help.
<script language="JavaScript">
function showValue(index) {
alert("Flag " + index + " is: " + document.forms[0].disableFlag.value);
return true;
}
I don't know why that makes it work, though. Very puzzling to me... :(
I think there are a couple of suggestions I can make here. First of all, every SELECT element in your form needs a unique name. Your second posting suggested that both SELECT lists were named "disableFlag", and that will confuse the function. Make sure each has a distinct name.
Second, when calling functions based on a changed selection, I like to use an explicit style of object-passing... what I mean is, I tell the javascript function exactly what object I want it to look at using the word "this". Your code would change as shown:
<html>
<script language="JavaScript">
function showValue(obj) {
alert("Flag " + obj.name + " is: " + obj.value);
return true;
}
</script>
<body>
<form name="subActionForm" method="post" action="">
<select name="disableFlag" onchange="showValue(this);">
<option selected value="N">N</option>
<option value="Y">Y</option>
</select>
</table>
</form>
</body>
</html>
The word "this" passes the entire object (in this case a SELECT element) to the function... when it gets there it retains all its properties (like ID, NAME, SELECTEDINDEX, etc) and all its methods, collections, etc. Sometimes this saves me a lot of headache.
With this example, it won't matter whether you have 1 SELECT element or 1000.
Hope that helps out a little.
I actually figured it out myself too. When there is only one disableFlag, I should use disableFlag.value instead of disableFlag[index].value.
You used: onchange="showValue(0);"
What this did is sent the index of ONLY the first option in your menu to be analysed. It didn't matter which one was selected, you were only asking about that one value.
When you changed it to: onchange="showValue(1);"
you were only inquiring about the SECOND option, regardless of what was actually selected.
The solutions contributed here allow you to get the value of the ACTUAL option selected:
onchange="showValue(this);"
by passing the object reference itself, and letting the script find the CHOSEN value from however many options you included.
function showValue(fld) {
alert(fld.value);
}
Note that you need to indicate the values of the options explicitly for the alert to show anything, even though submitting the form will send the selected value properly. Without submitting, an empty value does not resolve correctly for the Javascript to post it.
<option />Y
Won't alert a value but will submit a value
<option value="Y" />Y
Will alert a value and submit a value
