Passing a form array to Javascript via PHP using jQuery AJAX

Question

I'm submitting a form via AJAX and utilising jQuery and I need to find out how I cna pass form arrays to it.

For example, my html would be something like:

<input id="standard_field" type="text" name="standard_name">
<input id="some_id_1" type="text" name="my_array[my_name_1]">
<input id="some_id_2" type="text" name="my_array[my_name_2]">
<input id="some_id_3" type="text" name="my_array[my_name_3]">

Now I know you can easily get the name of the standard field in jQuery using something like:

var foo = $('standard_field').val();

But I'm not sure how to get the array data? Also, it needs to be passed to the PHP script from ajax in exactly the same way the PHP script would get it as if the form was submitted without ajax.

So an example of how I would normally pass data:

var foo = $('standard_field').val();

var loadUrl = "some_script.php";
var dataObject = { foo: foo };    

getAjaxData(loadUrl, dataObject, 'POST', 'json')

    .done(function(response) {
        //..........
    })

    .fail(function() {
        //......
    });

// End  

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });    

}

So firstly how can I get the data to pass from the form and secondly how can I pass it from jQuery to the PHP script so PHP get's it as an array like it would if it was POST'ed straight to the PHP script?

Answer 1

You should use serialize

HTML:

<form id="form1" action="" method="post">
    <input id="standard_field" type="text" name="standard_name">
    <input id="some_id_1" type="text" name="my_array[my_name_1]">
    <input id="some_id_2" type="text" name="my_array[my_name_2]">
    <input id="some_id_3" type="text" name="my_array[my_name_3]">
</form>

JS:

var dataObject = $('#form1').serialize();
var loadUrl = "some_script.php";

getAjaxData(loadUrl, dataObject, 'POST', 'json')

    .done(function(response) {
        //..........
    })

    .fail(function() {
        //......
    });

// End  

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });    

}

Answer 2

You can use this plugin http://malsup.com/jquery/form/

Example code:

JS:

$('#your_button').change(function() {
    var options = {
        url: 'your_url',
        type: 'POST',
        dataType: 'json',
        beforeSubmit: function() {
            //  Callback function to be invoked before the form is submitted
        },
        success: function(data) {
            //  Callback function to be invoked after the form has been submitted
        },
        error: function() {
            //  Callback function to be invoked upon error
        }
    };

    //  do something
});

PHP:

var_dump($_POST);

Answer 3

You can use the String.slice method to extract the label name.

var input = $('#myform input');
var data = [];
var name, label, value = '';
for(var i in input) {
    name = input.eq(i).attr('name');
    label = name.splice(9, -1);
    value = input.eq(i).val();
    data[label] = value;
}
data = JSON.stringify(data);

And for detect when it's an array you can user String.indexOf('[') like

For an unknown array structure :

array_name = name.splice(0, name.indexOf('['));
label = name.splice(name.indexOf('['), name.indexOf(']'));