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