HTML Forms - Using arrays for fields

Question

Have a form

<div class="customer">

<input type="text" name="customer" />
<input type="text" name="address" />
<select name="married">
  <option value="0">No</option>
  <option value="1">Yes</option>
</select>

</div>

Using jQuery, users can add as many customers as they like to the form. How do I keep each customer separated for validation and database purposes? I believe using an array field is the answer but I am concerned about empty values such as missing an address or failing to answer the "married" question.

Thanks.

jQuery has a very good validate-plugin. Just make sure to but class="required" on your new items and it should block any form from being submitted without the correct information filled in. — OptimusCrime
– OptimusCrime, Commented Dec 7, 2011 at 14:19

Cyclonecode · Accepted Answer · 2011-12-07 14:15:52Z

2

You will have to append a [] to all your fields, so in your case it will look like this:

<div class="customer">
   <input type="text" name="customer[]" />
   <input type="text" name="address[]" />
   <select name="married[]">
     <option value="0">No</option>
     <option value="1">Yes</option>
   </select>
 </div>

Then using a server side language like php you can parse the data like:

$customer = $_REQUEST['customer']; // array holding all customer fields
$address = $_REQUEST['address'];  // array holding all address fields
$married = $_REQUEST['married']; // array holding all married fields

answered Dec 7, 2011 at 14:15

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Walsh · Accepted Answer · 2011-12-07 14:50:05Z

These are my modifications to an existing plug-in I found although I do not remember where I found it.

If you take this you can take the numberof input that you would put in there and simply loop through the submissions. For instance you would create a div with the id of readroot, every input in there is going to be duplicated when the person clicks on the button to duplicate the actual div. You can create a button with onclick morefields() to execute the reproduction of the div. Then inside of your PHP file where you're collecting the posted data you can collect the numberof value and loop through, for instance, the code is below.

JQUERY:

var counter = 1; 
function morefields() { 
  formClone = $('#readroot').clone(true); 
  $(formClone).css("display", "block"); 
  counter++; 
  $(formClone).attr("name", 'readroot' + counter); 
  $(formClone).attr("id", 'readroot' + counter);
  $(formClone).find("input, select, textarea").each(function() { 
    var s = $(this).attr("name")+counter; 
    var t = $(this).attr("id")+counter;
    $(this).attr("name", s); 
    $(this).attr("id", t); 
  }); 
  $("#writeroot").append(formClone); 
  var a = $(formClone).attr("id"); 
  $('#numberof').val(counter);
}

PHP:

$number=$_POST['numberof'];
$num=0;
while($num <= $number){
  $field=($num==0 ? $_POST['field'] : $_POST['field' . $num]);
  $text=($num==0 ? mysql_real_escape_string($_POST['text']) : mysql_real_escape_string($_POST['text' . $num]));
  $num++;
  if ($num==1) { $num=2; }
}

This works great for me so hopefully this helps you a bit or shows you what else you can do!

Collectives™ on Stack Overflow

HTML Forms - Using arrays for fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related