Retrieve the name of the submit button in a form using jQuery

Question

I am working with PHP and jQuery. I have 2 files

test.php

 <script> $(document).ready(function(){ $(".form-register").submit(function (e) { var form_data = $(this).serialize(); e.preventDefault(); $.ajax({ type: "POST", url: "test2.php", data: form_data, dataType: 'json', success: function(){ alert(form_data); } }); }); }); </script> <form class="form-register"> <input name="email" type="text"/> <input name="name" type="text"/> <input type="submit" name="register"/> </form> 

and the second file is test2.php :

<?php
if(isset($_POST['register'])){
    echo json_encode('Message from test2.php');
}else{
    echo json_encode('post no received');
}

It seems like I am unable to retrieve $_POST['register'] because when I check alert(form_data); only the email and the name are displayed.

Is there anyway for me to get $_POST['register'] ?

Answer 1

Add value attribute to submit button and use $('form').serializeArray() . Try:

$(".form-register").submit(function (e) {
  var formData = $(this).serializeArray();
  var name = $(this).find("input[type=submit]").attr("name");
  var value = $(this).find("input[type=submit]").val();
  formData.push({ name: name, value: value });
  //now use formData, it includes the submit button
  $.ajax({
     type: "POST",
     url: "test2.php",
     data: formData,
     dataType: 'json',
     success: function(){
         alert(form_data);
     }
  }); 
});

Answer 2

Neither .serialize() nor .serializeArray() will serialize the submit button value.

.serialize()

...No submit button value is serialized since the form was not submitted using a button.

.serializeArray()

...No submit button value is serialized since the form was not submitted using a button.

Only successful controls are serialized.

The input submit element is actually a successful control, but as mentioned above since the form is not submitted using the submit button, the input submit value attribute will not be included by jquery serialization.

If you want to use .serializeArray() just add the input submit elements name and value attribute values as an object to the serialized array like so.

 $(document).ready(function(){ $(".form-register").submit(function (e) { var form_data = $(this).serializeArray(); var $submit = $(this).find('input[type="submit"]'); form_data.push({name: $submit.prop("name"), value: $submit.val()}); console.log(form_data); // do your ajax request here... }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-register"> <input name="email" type="text"/> <input name="name" type="text"/> <input type="submit" name="submit" value="register"/> </form> 

If you want to use .serialize() just add the values of the value and name attributes of the submit element to the text string created by the .serialize() method. Be careful, the string needs to be URL-encoded.

 $(document).ready(function(){ $(".form-register").submit(function (e) { var form_data = $(this).serialize(); var $submit = $(this).find('input[type="submit"]'); form_data = form_data + "&" + $submit.prop("name") + "=" + $submit.val(); console.log(form_data); // do your ajax request here... }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-register"> <input name="email" type="text"/> <input name="name" type="text"/> <input type="submit" name="submit" value="register"/> </form>