php - Validating form data with Multiple inputs


I have code at the moment where is a user input multiple items into a text input separated by a comma, this gets submitted to php backend and using explode, I can retrieve the correct values and process them back through jQuery.

Here is my problem. I need to find a way to validate input using several input boxes. The maximum would be 8 and I am struggling to find a way to do this, using my existing code.

Firebug states the the POST is 2 separate box_add posts ie, box_add 192 box_add 193. I cannot use [] because that will interfere with validator. I would be grateful for someguidance as to how to move forward with this. Many Thanks

HTML relevant code

<a href="#" id="INTKAddMoreFileBox" >Add More Box Fields</a>
  <div id="INTKInputsWrapper">
      <input name="box_add" type="text" id="box_add" />
      <a href="#" >&times;</a>
      <a href="javascript:void(0)" title="Just an example" >Help</a>

PHP code


    $connect = mysql_connect("localhost", "root", "") or die ('{"opp":"error","box":"mysql_connect FAILED"}');

    $db = mysql_select_db("sample");

    // test vars from jquery form
    $status = mysql_real_escape_string($_REQUEST['status']);
    $company = mysql_real_escape_string($_REQUEST['company']);
    $requested = mysql_real_escape_string($_REQUEST['requested']);
    $activity = mysql_real_escape_string($_REQUEST['activity']);
    $address = mysql_real_escape_string($_REQUEST['address1']);
    $service = mysql_real_escape_string($_REQUEST['service']);
    $destroyDate = mysql_real_escape_string($_POST['datepicker']);
    $date = explode('/', $_POST['datepicker']);
    $newdate = $date[2].'-'.$date[1].'-'.$date[0];
    //$box = mysql_real_escape_string($_REQUEST['box_add']); // never used
    $authorised = mysql_real_escape_string($_SESSION['kt_name_usr']);
    $dept = mysql_real_escape_string($_REQUEST['dept']);
    $boxerrortext = 'Error';

    // Split the box if multiples
    $array = explode(',', $_REQUEST['box_add']);

    $outString = ''; 

    foreach ($array as $box) {
        $box = mysql_real_escape_string($box);
        $sql = "SELECT item FROM act WHERE item = '$box'";
        $result = mysql_query($sql) or die ('{"opp":"error","box":"' . mysql_error() . '"}');

        // If there are dupe entries, send message to jquery
        if (mysql_num_rows($result) > 0) {

            $outString .= $box . ' ';       
    if ($outString) {
        $error = array('opp' => "error", 'box' => $outString); 

        $output = json_encode($error);
        echo $output;

    foreach ($array as $box) {
        $outString .= "<br />company:  $company <br /> address: $address <br />service: $service <br />Destroy Date: $destroyDate <br />box: $box <br />";

        $box = mysql_real_escape_string($box);
        $sql = "INSERT INTO `temp` (service, activity, department, company, address, user, destroydate, date, item, new)";
        $sql .= "VALUES ('$service', '$activity', '$dept', '$company', '$address', '$requested', '$newdate', NOW(), '$box', 1)";
        $result = mysql_query($sql) or die ('{"opp":"error","box":"' . mysql_error() . '"}');

    $json = array('opp' => 'insert', 'box' => $outString);
    $result = json_encode($json);
    echo $result;

Script to add inputs

<script type="text/javascript">
$(function() {

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#INTKInputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#INTKAddMoreFileBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
        if(x <= MaxInputs) //max input box allowed
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="box_add" id="box_add" /><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
return false;

$("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
return false;




why don't you enumerate the inputs instead?

something like:

    $(InputsWrapper).append('<div><input type="text" name="box_add'+FieldCount+'" id="box_add'+FieldCount+'" /><a href="#" class="removeclass">&times;</a></div>');

and when removing the input just add rest the counter


now, on the php side, you can process these fields by:

  • using a regex to find the max amount of inputs sent based on the input id (if box_add7 exists, then 7 would be the max number of box_add to iterate)

  • or send this field counter value on a hidden field

  • or, if using AJAX, as an extra parameter with the value of FieldCount.

    for ($i = 1; $i <= fieldCounter; $i++){
      $value = $_POST["box_add".$i];
      //do something with $value

People are also looking for solutions to the problem: php - How to loop when using a Google api


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.