CODEWITHSUNDEEP
javascriptphpjqueryajaxmysqli
Jay
Jay

Reputation: 161

Pass array of data from form, to ajax, to PHP post file

I'll try and keep this short. I have a form who's input fields (54 of them) are auto filled with data from a database. The ID of each input field is assigned with an ID using a PHP while loop. The user can edit the values and click submit. When the form is submitted, the data is passed to an array in jquery. I want to be able to pass that array from ajax to PHP via POST.

Form/submit page 

$settings = array();
$counter = 0;

if(mysqli_num_rows($result) > 0){
    while($row = mysqli_fetch_assoc($result)) {
        $settings[$counter] = $row['value'];

        echo "<tr>
                <td>" . $row[$settings] . "</td>
                <td><input type=\"text\" id=\"" . $counter . "\" value=\"" 
                                 . $settings[$counter] . "\"></td>";
        counter++;
    }
}

mysqli_close($svr_link);

jQuery script (inside of the form/submit page)

    $('#update').click(function(event) {
    event.preventDefault();

    var settings = [];
    for (i=0; i<55; i++) {
        settings[i] = $('#' + i).val();
    }

    $.ajax({
        type: "POST",
        url: "pages/post.php",
        data: {settings:settings},
        success: function(data) {
            $('#message').html(data);
        }
    });
});

My question is:

  1. Did I properly set up that data array in the ajax call?

  2. How do I pull and deal with the data array in the post.php file?

Let me know if I omitted something relevant

Upvotes: 2

Views: 1897

Answers (2)

Jose Rojas
Jose Rojas

Reputation: 3520

If you're sending array data as JSON, it'd be recomendable to set dataType in your ajax set up at client.

$.ajax({
    type: "POST",
    url: "pages/post.php",
    dataType: 'json',
    data: {settings:settings},
    success: function(data) {
        $('#message').html(data);
    }
});

At server side, use json_decode function to get an array, that way you can easily work with data. It'd be something like this:

json_decode($_POST['settings'], true);

Upvotes: 3

salvatore
salvatore

Reputation: 521

Add name attribute to all the inputs in array form

while($row = mysqli_fetch_assoc($result)) {
        $settings[$counter] = $row['value'];

        echo "<tr>
                <td>{$row[$settings]}</td>
                <td>
                    <input 
                        type=\"text\" 
                        id=\"{$counter}\" 
                        name=\"settings[{$counter}]\" 
                        value=\"{$settings[$counter]}\"
                        >
                </td>";
        counter++;
    }

Then add an id to the form (if you don't have a form tag, place the id on some HTML element that contains all the inputs, like probably the table), ad rely on jQuery serializeArray()

let data = $('#formId').find(':input').serializeArray();

So, your code become:

$('#update').click(function(event) {
    event.preventDefault();

    let data = $('#formId').find(':input').serializeArray();

    $.ajax({
        type: "POST",
        url: "pages/post.php",
        data: data,
        success: function(data) {
            $('#message').html(data);
        }
    });
});

jQuery.serializeArray()

Encode a set of form elements as an array of names and values.

from jQuery.serializeArray() documentation

Upvotes: 2

Related Questions