jQuery serializeArray doesn't include the submit button that was clicked

Solution 1:

Is [there] another method that DOESN'T exclude the activated button in a serialization?

There is not, the behavior is based on the submit event of the <form>, not of a button, e.g. hitting enter or calling .submit() in JavaScript. You're mixing 2 concepts here, a .serialize() or .serializeArray() may or may not have anything to do with a button click - it's just a separate event altogether, they're not connected. These methods are at a higher level than that: you can serialize a form (or a subset of it) at any time for any reason.

You can however add the submit name/value pair like a normal form submitting from that button would, if you're submitting from a button for example:

$("#mySubmit").click(function() {
  var formData = $(this).closest('form').serializeArray();
  formData.push({ name: this.name, value: this.value });
  //now use formData, it includes the submit button
});

Solution 2:

fairly neat way to solve this:

<form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>

Solution 3:

I use the following snippet, basically adds a hidden element with same name

 var form = $("form");
 $(":submit",form).click(function(){
            if($(this).attr('name')) {
                $(form).append(
                    $("<input type='hidden'>").attr( { 
                        name: $(this).attr('name'), 
                        value: $(this).attr('value') })
                );
            }
        });

 $(form).submit(function(){
     console.log($(this).serializeArray());
 });

Solution 4:

This solution is 'universal' as in it will handle all your input submits, passing each as a form variable on submission.

$(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});