Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

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.

One response to “Handling array of HTML Form Elements in JavaScript and PHP

  1. manish kumar 13/04/2012 at 2:36 AM

    But Then How i can access these values in next page in jsp… like request.getParameter(?):
    how i can access…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: