Validating form data with Multiple inputs

Question

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" class="btn btn-info">Add More Box Fields</a>
    <div id="INTKInputsWrapper">
       <div>
            <input name="box_add" type="text" id="box_add" />
            <a href="#" class="removeclass">&times;</a>
            <a style="margin-left: 14px;" href="javascript:void(0)" title="Just an example" class="tooltip">Help</a>
       </div>
    </div>

PHP code

<?php
    session_start();

    $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;
        exit();
    }

    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;
}) 

});
</script>

Answer 1

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

FieldCounter--;

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
  }