This page demonstrates how you can interact with elements of a from through javascript using some newer methods to provide you with more flexibility.
Multiple Forms On A Page With The Same Form Element
In the past, the method of accessing a specific form element in a form was to use the old "forms[0], forms[1]" method. Granted, that works until someone decides that one of the forms is no longer needed in the page and removes it (such as "forms[0]"). This causes your javascript to break if it is trying to access "forms[1]" which no longer exists.
Here's a newer method for accessing a form element (although it is browser-specific) in a form without being limited by the old method mentioned previously. In this case, we are "unchecking" a checkbox in the second form:
<script language="javascript" type="text/javascript">
<!--
var formID = "frm2"; /* The ID of the Form to target, not the name given to the Form. */
var elementName = "cbox"; /* The name of the Form Element in the Form, not the ID given to the Form Element. */
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) { /*IE*/
if (document.getElementById(formID)(elementName)) { document.getElementById(formID)(elementName).checked = false; }
}
else { /*Other*/
if (document.getElementById(formID)[elementName]) { document.getElementById(formID)[elementName].checked = false; }
}
//-->
</script>
<form id="frm1">
<input type="checkbox" name="cbox" /> Checkbox option
</form>
<form id="frm2">
<input type="checkbox" name="cbox" /> Checkbox option
</form>
Capturing The Option Index And Value Of A Select Box (aka drop-down menu)
When someone clicks on an item within a select box, you can capture both the index and text of that selection using "onChange" as shown below. In this case, a simple alert is done to show the data:
<select id="choices" name="choices" onChange="javascript:alert('Option value = ' + this.options[this.selectedIndex].value + '\nOption text = ' + this.options[this.selectedIndex].text);">
<option value="123"> Choice #1 </option>
<option value="456"> Choice #2 </option>
</select> Choose One
Adding An Option To A Select Box Dynamically
With javascript, it is simple to add an option to an already-rendered select box. Here's how to do it:
<script language="javascript" type="text/javascript">
<!--
var selBoxID = "choices";
var selChild = document.createElement("option");
selChild.text = "Choice #2";
selChild.value = "456";
try { document.getElementById(selBoxID).add(selChild, null); }
catch(onerror) { document.getElementById(selBoxID).add(selChild); }
//-->
</script>
<select id="choices" name="choices">
<option value="123"> Choice #1 </option>
</select> Choose One
Removing An Option From A Select Box Dynamically
With javascript, it is simple to remove an option from an already-rendered select box. Here's how to do it:
<script language="javascript" type="text/javascript">
<!--
var selBoxID = "choices";
var optValueRemove = 123;
for (x = document.getElementById(selBoxID).length - 1; x >= 0; x--) {
if (document.getElementById(selBoxID).options[x].value == optValueRemove) { document.getElementById(selBoxID).remove(x); }
}
//-->
</script>
<select id="choices" name="choices">
<option value="123"> Choice #1 </option>
<option value="456"> Choice #2 </option>
</select> Choose One
Removing All Options From A Select Box Dynamically
You can also remove all of the options of a select box. Here's how to do it:
<script language="javascript" type="text/javascript">
<!--
var selBoxID = "choices";
for (x = document.getElementById(selBoxID).options.length - 1; x >= 0; x--) {
document.getElementById(selBoxID).remove(x);
}
//-->
</script>
<select id="choices" name="choices">
<option value="123"> Choice #1 </option>
<option value="456"> Choice #2 </option>
</select> Choose One
Compile Select Box Values Dynamically
With some more elaborate front-end (client-side) requirements, you may need to compile the option values that are contained within a select box. Here's how to do it:
<script language="javascript" type="text/javascript">
<!--
var fullList = "";
var selBoxID = "choices";
for (x = 0; x <= document.getElementById(selBoxID).length - 1; x++) {
if (document.getElementById(selBoxID).options[x].text.length > 0) {
if (fullList.length == 0) { fullList = document.getElementById(selBoxID).options[x].value; }
else { fullList = fullList + "," + document.getElementById(selBoxID).options[x].value; }
}
}
alert(fullList);
//-->
</script>
<select id="choices" name="choices">
<option value="123"> Choice #1 </option>
<option value="456"> Choice #2 </option>
</select> Choose One
Get The Option Value Of Select Box
You can grab the option value of a select box without needing to get the value after the select box option is selected. Here's how to do it:
<script language="javascript" type="text/javascript">
<!--
var optValue = document.getElementById("choices").options[document.getElementById("choices").selectedIndex].value;
alert(optValue);
//-->
</script>
<select id="choices" name="choices">
<option value="123"> Choice #1 </option>
<option value="456"> Choice #2 </option>
</select> Choose One
