Handling array of HTML Form Elements in JavaScript and PHP

Wednesday, August 27, 2008, 19:46
how-to, javascript, php, tips and technique
25 comments

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: 16% [?]

Tags: array, form, javascript, php, tips

» Getting country , city name from IP address in PHP
» Prevent form post request from another domain in PHP
» Smart contact form for your websites
» Cross-site scripting ( xss ) attack by example and prevention in PHP

25 Comments on “Handling array of HTML Form Elements in JavaScript and PHP”

Kye Etherton wrote on 2 January, 2009, 11:18
Thank you very much. Spent 3 days looking for the solution to this problem.
IRINEL wrote on 5 March, 2009, 13:48
Thank you for the article! I found it right on time before jumping over window because of javascript failing methods to acces that checbox array.
Raju wrote on 4 May, 2009, 18:07
Thanks a lot. I have spent a lot of hours on this reading manuals and googling. But I found that it is not working if the array has only one value. The error says that “cannot convert undefined or null to object”. Any solutions ?

Raju
hardyboyz wrote on 8 May, 2009, 3:39
Hai, nice tutorial. but i had a little problem with another kind in html array. The javascript can’t run if the html form have an array like this :

What should i do first to get javascript can read those html array??? Please help..
sharief wrote on 8 May, 2009, 5:30
Hi,

Thanks for providing this. Can you provide some useful tips like using ‘array of HTML Form Elements’ for writing code which can be very flexible in dealing large forms and whose fields may change dynamically.
Victor wrote on 28 May, 2009, 8:35
But, if they have something like this?:

<input type=”text” name=”data[1][name]” value=”name one”>
<input type=”text” name=”data[2][name]” value=”name two”>
<input type=”text” name=”data[3][name]” value=”name three”>

how can I access it with JavaScript?
Mahesh wrote on 8 June, 2009, 3:09
This is indeed a good article. And thank you so much for it. Just would like to know how this would apply to a checkbox instead of a textbox. For a checkbox, you get all the values of the not just the ones that are checked. How would you address that?
Akinyele Olubodun wrote on 1 July, 2009, 17:29
Thank you very much. I saw this tutorial at the right time. My head almost blew off finding a way to get value of my text field with JAVASCRIPT.
kat wrote on 22 July, 2009, 5:42
thank you so much for the article!been looking for this for a month now.sorry, im new to javascripting.i hav a question, how can i return the value of the array to php?
little help?thanks!:)
Fabio wrote on 31 July, 2009, 12:30
Nice tutorial, but I’ve got the same problem as Raju, if the there’s only one element, the form.elements['elementname[]‘] return null.

Does anyone have de solution?

thanks
Fabio wrote on 31 July, 2009, 14:27
I found the solution for this question

When the array have only one value, you must get the hidden field by its id, in this case, the field must have its id equal its name. Like this:

When we going to acces its value, we have to do a try catch, like this:

try{
myvar = document.myform.elements['namefield[]‘][index].value;
}catch(e){
myvar = document.getElementById(‘namefield[]‘).value;
}

With this I resolved my problem, I hope that I had help.

PS: Sorry about the gramatical errors, I’m still learning english.
web2sms wrote on 18 August, 2009, 7:07
the js part is not working in firefox.
Thomas wrote on 21 August, 2009, 11:52
Uuuuh, finally. This has been a pain ima for a while. Couldn’t figure out how to handle the arrays with JavaScript.

My deepest thanks for this article!
Sethu wrote on 20 November, 2009, 0:33
This is excellent article. I killed few hours/days. Thanks a lot. But this does not work in Firefox. Any work around??

Thanks
Sethu
sarika wrote on 25 November, 2009, 5:40
it does not work in IE7
waseem wrote on 23 December, 2009, 8:54
nice stuff ,good script
ali wrote on 10 March, 2010, 13:46
hello

how use out value in php code?
Bajarang wrote on 2 August, 2010, 9:41
This is really very good tutorial.
ncomputing_gsi wrote on 5 August, 2010, 17:51
nice one. really helps a lot.
Data wrote on 11 August, 2010, 7:25
I used a dynamic adding of row thru Javascript and HTML. My HTML name has already been appended. I placed: “foreach($_POST['education'] as $key=>$value) echo $key.’ ‘.$value;” on a php page.. However it says, Warning: Invalid argument supplied for foreach().
Paulo wrote on 21 January, 2011, 2:02
Thank you very much

I was going crazy over this business already.

Thank you for real!
links london wrote on 22 January, 2011, 9:24
Great post. Thanks for sharing.I am constantly searching online for articles that can aid me. Thanks!
ntwobike wrote on 23 February, 2011, 4:21
hi
thanks for the good post.i have small problem i think you guys can easyly answer that.i want to change some elemnt value ( ex : education[1].value = 5 ) from javascript how do i do it
Armenio Tamales wrote on 13 June, 2011, 22:23
Thanks a lot.
i really appreciate this post, it was what i was looking for.