JQuery / Ajax not getting submit button name

Question

I am struggling with the submit form using several submit buttons on the form. I know that the submit button name is not serialized, but I need to pass that name to handle the script.

Code example:

<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 jQuery code:

 $('#workarea').on('submit','#newqueryform', function(e) { var formData = $(this).closest('#newqueryform').serializeArray(); alert(JSON.stringify(formData)); ... 

2 submit buttons are not displayed! Only other input fields are displayed. How to find out which button was pressed?

Answer 1

Because you rely on the buttons you click, not just the form you submit, attach the action to the buttons. Since $(this) in function(){} contains the pressed button, you can form its details Data.

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