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']?

use this.. and check you can solve your issue.. no need to do anything. — Hardik, Jul 12 '16 at 13:33
Please check : http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked — Bhavin Solanki, Jul 12 '16 at 13:35

score 1 · Answer 1 · edited Jul 12 '16 at 13:37

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

edited Jul 12 '16 at 13:37

A. Wolff

74,033
9
94
155

answered Jul 12 '16 at 13:32

Dhara Parmar

8,021
1
16
27

`this` is referring to the form – A. Wolff Jul 12 '16 at 13:35
Thanks guys. But in my initial code, when I replace the second line of the file `test2.php` (`if(isset($_POST['register'])){`) by (`if(!empty($_POST)){`), the `if condition` of the test2.php returns true even if the input fields were empty while submitting the form. Is there anyway to solve it ? – Prince Jul 12 '16 at 14:49

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

Thanks guy. But in my initial code, when I replace the second line of the file `test2.php` (`if(isset($_POST['register'])){`) by (`if(!empty($_POST)){`), the `if condition` of the test2.php returns true even if the input fields were empty while submitting the form. Is there anyway to solve it ? — Prince, Jul 12 '16 at 14:48

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

2 Answers2