Submit all forms using Ajax with 1 button

Question

I am trying to submit a dynamic amount of forms by pressing one button. The form has seperate submit buttons and updating the data works with that button.

I made a fixed button on the bottom of the page that I would like to be able to submit all forms. So you can adjust all the data in all the forms, press 1 button and update all the data in the database.

Like I said, the updating the database part works (for a single form).

So this is my current code:

<button id="saveall" style="position: fixed; bottom: 20px;">Opslaan</button>
<script>
$( "#saveall" ).click(function() {
    console.log("clicked");
    $("form.edit_form").each(function () {
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes the form's elements.
            success: function(data)
            {
                console.log(data); // show response from the php script.
            }
        });
    });
});
</script>

This is what a form looks like:

<form class="edit_form" method="post" action="/collectie-manager-edit">
            <input type="hidden" name="UID" value="%UID%">
            <div>
                <label>Titel</label><br>
                <input type="text" name="titel" value="%titel%">
            </div>
            <div>
                <label>Merk</label><br>
                <input type="text" name="merk" value="%merk%">
            </div>
             <div>
                <label>Prijs</label><br>
                <input type="text" name="prijs" value="%prijs%">
            </div>
            <div>
                <label>Jurkcode</label><br>
                <input type="text" name="jurkcode" value="%jurkcode%">
            </div>
            <div>
                <label>Jurk Titel</label><br>
                <input type="text" name="Jurktitel" value="%Jurktitel%">
            </div>
            <div>
                <label>Youtube code</label><br>
                <input type="text" name="youtubecode" value="%youtubecode%">
            </div>
            <div>
                <label>Custom url</label><br>
                <input type="text" name="custom_url" value="%custom_url%">
            </div>
            <div>
                <label>Positie</label><br>
                <input type="text" name="positie" value="%positie%">
            </div>
            <input type="submit" name="change_item" value="opslaan">
        </form>

Current php code handeling the form submit (single):

if(isset($_POST['change_item'])){
        $result = $db->update(
            "collectie",
            ["UID" => $_POST['UID']],               // get
            ["titel" => $_POST['titel'],"merk" => $_POST['merk'],"prijs" => $_POST['prijs'],"jurkcode" => $_POST['jurkcode'],"Jurktitel" => $_POST['Jurktitel'],"youtubecode" => $_POST['youtubecode'],"custom_url" => $_POST['custom_url'], "positie" => $_POST['positie']]                            // getFuzzy
        );
    }

What happends currently?

It spits out all the html into the console and nothing happends in the .php The form handler is in the same php controller as the page. So the action points to the same page.

I have never used Ajax and I think its extremely confusing.

I can't find anything on the web that says I need different php for handling the ajax method. And seeing that I get 0 errors I am unsure of what to do to fix it.

ps: All the values that has %% in them are filled by the cms the page is build with. They are filled with values from the database.

Edit on why this question is different from the one that is linked.

That question asks how to dynamically post inputs not seperate forms. I have tried the answers in that question and they do not work.

A quote from the question:

I have a form with name orderproductForm and an undefined number of inputs.

I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the inputs of the form orderproductForm.

Answer 1

Ok, I think I get it.

Use .serializeArray() instead of .serialize().

Example result with .serialize():

UID=5&titel=myTitel

Example result with .serializeArray():

[
    { name: 'UID', value: '5' },
    { name: 'titel', value: 'myTitel' }
]

Also, check if your submit button (change_item) is in your array, if that's not the case (and will not because that's an input button), you may add it in your serialized array, or update your PHP controller.

Be aware that with .serializeArray(), you will not be able to retrieve your input data with $_POST['input_name'], as indexes are integer (from 0 to your array length). Here's a function to convert your array:

let serialized = [
    {name: 'UID', value: '5'},
    {name: 'titel', value: 'myTitle'}
];

serialized = formatSerializedFormForAjax(serialized);

function formatSerializedFormForAjax(serialized) {
    let result = {};

    for (let i in serialized) {
        result[serialized[i].name] = serialized[i].value;
    }

    return result;
}

console.log(serialized);

If you use if in your code:

// form and url
let data = formatSerializedFormForAjax(form.serializedArray());

$.ajax({
   // ...
   data: data,
   // ...
});

Now you should be able to get your input values with $_POST['UID'].