jQuery：在.serializeArray（）中推送值；

Question

I'm working on an AJAX form submition in jQuery.

I used the .serializeArray() function for serializing the form, but I need to add an element to the obtained object, so I used the push() function.

So it may look like that:

{
    name: "Test",
    surname: "Test",
    action: "register"
}

When I serialize the form, the name and surname field will be sent, but the action field will not. I send the informations to a PHP echo function but, like the console.log() result, it will show the name and the surname, but not the action.

I tried the .serialize() function to, but I'll still not obtain what needed.

Here is a fiddle .

$(document).ready(function () {
    $("#register").on("submit", function (e) {
        e.preventDefault();

        var data = $("#register").serializeArray();
        data.push({name: "action", value: "register"});

        console.log(data);

        jQuery.post("/echo/json/", data,
            function () {
                alert("Success");
            },
        "json");
    });
});

Answer 1

The issue is that you are binding an event handler, but you are not preventing the form from submitting like the default behavior. You can fix this by adding return false; at the end of the event handler, but there are better ways (search google for jQuery prevent form submit). You also need to bind $('#register').submit instead of $("#registerSubmit").click (this makes the enter button work as well)

Answer 2

The problem is that you are sending two requests, so disable form submit:

$( '#register' ).on( 'submit', function() {
    return false;
});

Or you can just place the submit button outside the form.