submit button not returning value via AJAX/JQuery to self-processing form

Question

I have a form which opens in Colorbox and is submitted via Ajax/JQuery to itself. However, it seems as if the data passed is not including the value of the submit button itself. Whether I use multiple submits or just one, there is no data in $_POST['submitButton'], and it doesn't respond to isset() or empty().

The rest of the form posts just fine though. I can echo $_POST['name'] and $_POST['email'], just not $_POST['submitButton']

Here is (a stripped down version of) my form:

<form id="sub-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input name="name" type="text" value="">
<input name="email" type="text" value="">
<input name="submitButton" type="submit" value="Submit">
</form>

And here is the jquery that processes the form to be submitted via AJAX, rather than an HTTP request.

jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
cbox_submit();
}});
});

function cbox_submit()
{
jQuery("#sub-process").submit(function(){
jQuery.post(
  jQuery(this).attr('action'),
  jQuery(this).serialize(),
  function(data){
    jQuery().colorbox({html: data, onComplete: function(){
      cbox_submit();
    }});
  }
);
return false;
  });
}

serialize won't include submit button value because form was not submited by submit button. Only "successful controls" are serialized to the string. — itachi
Thats frustrating. I'm considering working around it with a hidden value, but what JS would I use to change the value of that hidden button depending on which button is clicked and submit the form? — user1621945
Put a click handler on the submit button, and have it add an appropriate property to the object that it submits. — Barmar
Looks like I'm going to change my extra buttons to checkboxes, and let "checked" trigger the required actions, that way I can maintain one submit, and use a hidden value to check isset($_POST['submit']) — user1621945

Stephen Nielsen Stephen Nielsen · Accepted Answer · 2014-07-08T19:32:28

I know this is an old question but It looks like people do not understand that @itachi has the correct answer.

The serialize method will NEVER return a value from the submit button. It does not return the submit button in the post. You will do best to just use a hidden form field and adding a click event to the button.

submit button not returning value via AJAX/JQuery to self-processing form

3 Answers