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

Question

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:

Did I properly set up that data array in the ajax call?
How do I pull and deal with the data array in the post.php file?

Let me know if I omitted something relevant

The data in PHP will be in the $_POST array if passed correctly. — Jay Blanchard
– Jay Blanchard, Commented Feb 1, 2019 at 16:26
So I correctly made the $_POST array in the ajax call? How do I parse it in the PHP post file? — Jay
– Jay, Commented Feb 1, 2019 at 16:28
You'll have to print_r($_POST) in your to see what you have. You may want to think about converting the array to JSON before you send it, then decode the JSON on the PHP side for parsing. — Jay Blanchard
– Jay Blanchard, Commented Feb 1, 2019 at 16:31
Just out of curiosity, is there an advantage to encoding it in JSON as opposed to passing it as an array as I did? — Jay
– Jay, Commented Feb 1, 2019 at 16:32

Jose Rojas · Accepted Answer · 2019-02-01 16:48:41Z

3

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

edited Feb 1, 2019 at 16:48

answered Feb 1, 2019 at 16:32

Jose Rojas

3,5403 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jay Over a year ago

That was a typo, my mistake. I rewrote the code while looking at my other computer. It shows as i in my code.

salvatore Over a year ago

Be careful, dataType setting is the type of data that you are expecting back from the server, as per jQuery documentation. I've never tested it, but i suppose that if you want to send a JSON in the request content, you have to set contentType: 'json' and then pass the JSON string in the data setting

salvatore · Accepted Answer · 2019-02-01 16:48:05Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related