Monday 21 May 2012

• Home
• Answers
• About
• Contact

From w3schools.in

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.

 

» Useful functions to tighten the security in PHP
» CodeIgniter A recommendation for PHP Programmer
» PHP Framworks Why when and which
» Solving Floating point number precision lost problem in PHP
» Handling array of HTML Form Elements in JavaScript and PHP
» How to filter user submitted data easily in PHP
» Prevent form post request from another domain in PHP
» Flaw in and or logical operator php
» Default arguments functions php
» Submit Form without Refreshing Page with Jquery
» MySQL Performance Tips
» Free ajax chat applications in PHP
» Return More Than One Value From a Function in PHP
» PHP Optimization Tips
» PHP Error Handling
» Useful PHP Classes and Libraries
» Useful Tools For PHP Developers
» PHP Frameworks
» Web based HTML Editors
» 301 redirect in PHP and .htaccess
» Hiding PHP file extension
» Rredirect Browser HTTPS SSL PHP
» Tighten php security functions
» PHP Framworks