Question

I have ajax code like this which is passing form data into createfinalinvoice.php.

serial_number and skid are part of some form fields which are name=”serial_number[]” and name=”skid[]” (See below)

$(document).ready(function() {
    $("form#submit").submit(function() {
        // we want to store the values from the form input box, then send via ajax below
        var invoice_temp_id = $('#invoice_temp_id').attr('value');
        var customer = $('#customer').attr('value');
        var date = $('#date').attr('value');
        var shipdate = $('#shipdate').attr('value');
        var shipvia = $('#shipvia').attr('value');
        var ponumber = $('#ponumber').attr('value');
        var rep = $('#rep').attr('value');
        var invoicenotes = $('#invoicenotes').attr('value');
        var serial_number = $('#serial_number').attr('value');
        var skid = $('#skid').attr('value');
        var finalize_invoice = $('#finalize_invoice').attr('value');

        $.ajax({
            type: "POST",
            url: "includes/createfinalinvoice.php?",
            data: "invoice_temp_id="+ invoice_temp_id+
                "&customer="+ customer+
                "&date="+ date+
                "&shipdate="+ shipdate+
                "&shipvia="+ shipvia+
                "&ponumber="+ ponumber+
                "&rep="+ rep+
                "&invoicenotes="+ invoicenotes+
                "&serial_number="+ serial_number+
                "&skid="+ skid+
                "&finalize_invoice="+ finalize_invoice,
            success: function(data) {
                $('form#submit :input').not('input[type="submit"]').val("");
                $('div.success').fadeIn();
                $('div.success').html(data);
            }
        });

        return false;
    });
});

<form>
    <input type="text" name="serial_number[]" id="serial_number" class="serial_number">
    <input type="text" name="skid[]" id="skid" class="skid">
    <input type="text" name="serial_number[]" id="serial_number" class="serial_number">
    <input type="text" name="skid[]" id="skid" class="skid">
    <input type="text" name="serial_number[]" id="serial_number" class="serial_number">
    <input type="text" name="skid[]" id="skid" class="skid">
    <input type="text" name="serial_number[]" id="serial_number" class="serial_number">
    <input type="text" name="skid[]" id="skid" class="skid">
</form>

Since I am passing multiple of the same name it puts it in array. I am having a hard time figuring out how to get the AJAX code to read the array and pass it along. As of now the code just passes the first of each as a string instead of an array.

Answer 1

try using serialize! works wonders

$( document ).on( 'submit', "form#submit", function( ) {
 $.ajax({
            type: "POST",
            url: "includes/createfinalinvoice.php?",
            data: $( this ).serialize(),
            success: function(data){
                $('form#submit :input').not('input[type="submit"]').val("");
                $('div.success').fadeIn();
                $('div.success').html(data);
                }
            });
        });
        return false;

});

im using jquery’s .on here too, as its more powerful, and overall, better than just binding to the element.