1. Technology
Send to a Friend via Email

Referencing Form Fields

Join the Discussion

Questions? Comments?

Form fields are almost the only tags in HTML that can have both a name and an id associated with them. The values that your visitor enters into the fields in the form get passed to the script or page called by the action attribute in fields based on what is set in the name fields.

This means that the names assigned to the fields in the form should be selected as needed in order for the subsequent processing of the form input to work and these names may therefore not be suitable ones to use in referencing the fields from JavaScript running on that web page to validate the form input.

The best solution to this is to write your javaScript so that it doesn't need to use the name attributes of the form fields at all and have it use the id attributes to reference all the fields instead. This is easily done for all possible form fields except for radio buttons since with that one exception each field can be easily given its own unique id. The values in those fields can then be easily referenced using document.getElementById(idOfField).value instead of document.formname.fieldname.value in order to reference exactly the same value. This then gets us around any fields that have been given names that assign the values to be sent into arrays with the complication that it would have for our JavaScript. It also makes for more consistent coding within the JavaScript since we are not using one method to access the form content and a different method for the rest of the page.

So that just leaves us with a problem of how we can access radio buttons in a way that is consistent with the method we are using for the rest of the page.

The solution is to first give the radio buttons within a particular group ids which are based on the name followed by numbers. For example of we have three radio buttons we will give them ids like this:

<input type="radio" name="a" id="a1" value="0">
<input type="radio" name="a" id="a2" value="1">
<input type="radio" name="a" id="a3" value="2">

Just make sure you number all of them consecutively and don't skip any numbers as the loop we are going to use will be set to stop when it gets to an id that can't be found.

With this naming in place we can then set up a loop that will go through each of the buttons within the group in turn and work out which one (if any) is selected. We can then reference the selected radio button quite easily from its id.

Here's the simple JavaScript loop that will work out which of the buttons is selected.

var sel = 0;
for (var i = 1; document.getElementById('a'+i); i++) {
if (document.getElementById('a'+i).checked) {sel = i; break;}
}

After running that the sel variable will contain either 0 if none of the buttons is selected or will contain the appropriate number from the end of the id of the one that is selected. We can then easily access the radio button further by making use of that value like this:

if (sel > 0) alert(document.getElementById('a'+sel),value);

So now you have no excuse for coding the references to the content of your page in an inconsistent manner and can use document.getElementById for all of the page references. The form field names can then be set appropriately for the subsequent processing of the form without worrying about whether those names are also usable in JavaScript since you will not be using them to reference the fields from JavaScript.

©2014 About.com. All rights reserved.