Handling array of HTML Form Elements in JavaScript and PHP

Today, I would like to share the way of handling array of HTML FORM elements using JavaScript and PHP.Well, it’s very easy to get the data from the array of HTML form elements in PHP and using them but in JavaScript it’s a bit tricky to handle the array of HTML form elements. I had a hard time to handle them via JavaScript in past thats why I’m posting it here so that people will not have hard time to cope with array of form elements in JavaScript and PHP.

Array of HTML form elements

You can create the array of Form Elements for grouping the similar kind of object or data. The array of elements are very useful in the context where you don’t know how many similar kind of data user have to enter. For example, you have a form where user have to enter his education qualification then you might not know how many of the textboxes are required for a person and in such kind situation you can dynamically generate array of the elements in the form for entering such kind of information.

<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />

As you can in the above code, there are array element of textbox defined with the name “education”.Now, let’s see how can we handle them via JavaScript and PHP.

How to handle array of HTML form elements using PHP

If you submit the the the form with the above the array of elements then you can assess it via array of $_POST['education'] in PHP. You can use foreach() loop to access the value of the value of these form elements via PHP.

foreach($_POST['education'] as $key=>$value)
 echo $key.' '.$value;

Normally, posted variable are contained within the POST array but when you post the array of Form Elements then at that time the values are contained within the array of array i.e within $_POST['education'] in above exmaple.

How to handle array of Form elements using JavaScript

Handling the array of Form element part is a bit tricky. Now, let try to access the values of the above elements using JavaScript. First, let’s store the above object in a JavaScript variable

var mutli_education = document.form_name.elements["education[]"];

After storing the object in the variable, we can access the individual variables in the following way in JavaScript

for(i=0;i<mutli_education.length;i++)
{
 alert(mutli_education[i].value);
}

As you can see, you can get how many elements are there in the array using the lengh property and you can use the value property to get the value of the indivisual element.

Popularity: 13% [?]