Question

I usually pass data through .post() like this:

 $.post(
    "/ajax.php",
    $("#form").serialize(),
    function(responseJSON) {
        console.log(responseJSON);
    },
    "html"
);

Within my form "#form" I usually have a hidden input with the name “id” which holds a value to the id of the item I want to run queries on.

What I want to do is take out that hidden input and add in a data-id="$id" attribute in my submit button and have the jQuery function extract the data from there and send that along with the other #form fields.

In simple terms what I’m asking is how do I pass along $('#form').serialize() along with $('#button').data('id') over to my back end all in one $.post() function?

Answer 1

try this

var data = $("#form").serialize() + '&data-id=' + $('#button').data('id');
$.post(
    "/ajax.php",
    data,
    function(responseJSON) {
        console.log(responseJSON);
    },
    "html"
);