Looping through form elements using JavaScript

Here is another basic need of developer. Many times developer needs script to loop through all the elements that are available in form tag using client side script.

Following is the piece of Javascript that can be used on your page under script tag which will help to loop through all the form elements on page. You need to copy and paste the piece of code under <> < /script > tag for Javascript language.

Note, here you need to replace frmName with your actual name of form element on page.


for(i=0; i < document.frmName.elements.length; i++)
{
alert("Field Name : " + document.frmName.elements[i].name + "
<> Field Value : " + document.frmName.elements[i].value + ".
<> ");
}


You can find example of how can above piece can be used to loop through all the form fields. Example explains you how all the checkboxes available in form as well as explains how those checkboxes available on page can be unchecked (e.g. all the records listed on page needs to be activated/de-activated, or adding / removing items from your shopping basket).

Initially, you need actions to give call to the Function...
< type="button" name="btnSelect" value="Select Records" onclick="javascript: selectAll();">
< type="button" name="btnDeSelect" value="De-Select Records" onclick="javascript: deSelectAll();">

Second step is to have the piece of code that loops through all the elements,

< language="JavaScript">

function selectAll()
{
/* Function to loop through the form elements and check all the elements that are of type Checkbox */

for(i=0; i < document.frmName.elements.length; i++)
{
if(document.frmName.elements[i].type=="checkbox")
{
document.frmName.elements[i].checked=true;
}
}
}

function deSelectAll()
{
/* Function to loop through the form elements and un-check all the elements that are of type Checkbox */

for(i=0; i < document.frmName.elements.length; i++)
{
if(document.frmName.elements[i].type=="checkbox")
{
document.frmName.elements[i].checked=false;
}
}
}

< /script >