jQuery/Ajax does not get submit button name

Question

I am struggling with form submit using multiple submit buttons in the form. I know that the submit button name is not serialized, but I need to pass that name to the processing script.

Sample code:

<form id='newqueryform' action='process-forms.php' method='post' >
    <input type='hidden' name='formname' value='newqueryform'>
    <div id='runit'><input type='submit' name='runit'  value='Run' /></div>
    <div id='saveit'><input type='submit' name='saveit' value='Save' /></div>
</form>

There are 2 submit buttons here, but in the jQuery code:

$('#workarea').on('submit','#newqueryform', function(e)
{           

  var formData = $(this).closest('#newqueryform').serializeArray();
  alert(JSON.stringify(formData));
  ...

The 2 submit buttons don't show!! Only the other input fields show. How do I know which button was pressed??

Answer 1

Since you're relying on the buttons being clicked rather than just the form being submitted bind the action to the buttons. As $(this) in function(){} is the clicked button you can its details to formData.

$('#workarea').on('click','#newqueryform input[type="submit"]', function(e){
    var formData = $(this).closest('#newqueryform').serializeArray();   
    formData.push({name: this.name, value: this.value});
    ...