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


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.

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

  1. Kye Etherton

    Thank you very much. Spent 3 days looking for the solution to this problem.


    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.

  3. Raju

    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 ?


  4. 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..

  5. sharief


    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.

  6. 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?

  7. Mahesh

    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?

  8. Akinyele Olubodun

    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.

  9. kat

    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!:)

  10. Fabio

    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?


  11. Fabio

    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:

    myvar = document.myform.elements[‘namefield[]’][index].value;
    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.

  12. the js part is not working in firefox.

  13. Thomas

    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!

  14. Sethu

    This is excellent article. I killed few hours/days. Thanks a lot. But this does not work in Firefox. Any work around??


  15. sarika

    it does not work in IE7

  16. nice stuff ,good script

  17. ali


    how use out value in php code?

  18. Bajarang

    This is really very good tutorial.

  19. nice one. really helps a lot.

  20. 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().

  21. Paulo

    Thank you very much

    I was going crazy over this business already.

    Thank you for real!

  22. Great post. Thanks for sharing.I am constantly searching online for articles that can aid me. Thanks!

  23. ntwobike

    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 :(

  24. Armenio Tamales

    Thanks a lot.
    i really appreciate this post, it was what i was looking for.

Leave a Reply

Your email address will not be published. Required fields are marked *