（按钮||输入）type = submit-jQuery AJAX中$ _POST变量中缺少值

Question

I have login form where are two buttons - "login" and "forgot password?" And I need to check what button user clicked.

<form id="loginForm">
<div class="login-error" id="login-error"></div>
<input type="text" id="email" name="email">
<input type="password" id="password" name="password">
<input type="submit" name="submit" value="Login">
<button type="submit" name="submit" value="Forgot password?">Forgot password?</button>
</form>

var_dump($_POST) says:

array(2) { ["email"]=> string(0) "" ["password"]=> string(0) "" }

I am trying both ways (input type=submit and button type=submit) but none of them send the "submit" value.

(I am using jquery ajax)

 $("#loginForm").click(function(){
    /* Stop form from submitting normally */
    event.preventDefault();

    /* Get some values from elements on the page: */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "login.php", /* here is echo var_dump($_POST); */
        type: "post",
        data: values,
        success: function(data){
            $("#login-error").html(data);
        },
        error:function(){
            $("#result").html('There is error while submit');
        }
    });
});

Please do you know where the problem can be? I know, there are lot of threads about value of button but nothing works for me. I also tried this example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_value2

Answer 1

The .serializeArray() or .serialize() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized.

Refer..

http://api.jquery.com/serialize

http://api.jquery.com/serializeArray

jQuery serializeArray doesn't include the submit button that was clicked

Answer 2

This is one way to do it, concatening data string with specific clicked button name attribute:

HTML:

<form id="loginForm">
    <div class="login-error" id="login-error"></div>
    <input type="text" id="email" name="email">
    <input type="password" id="password" name="password">
    <button type="button" name="login" class="submit">Login</button>
    <button type="button" name="forgot" class="submit">Forgot password?</button>
</form>

JQ:

$("#loginForm").on('click', '.submit', function (event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Get some values from elements on the page: */
    var values = $(this).closest('form').serialize() + '&' + this.name;
    console.log(values);
    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "login.php",
        /* here is echo var_dump($_POST); */
        type: "post",
        data: values,
        success: function (data) {
            $("#login-error").html(data);
        },
        error: function () {
            $("#result").html('There is error while submit');
        }
    });
});

But better would be to target specific server side script depending which button is clicked, eg:

HTML:

<form id="loginForm">
    <div class="login-error" id="login-error"></div>
    <input type="text" id="email" name="email">
    <input type="password" id="password" name="password">
    <button type="button" name="login" class="submit" data-url="login.php">Login</button>
    <button type="button" name="forgot" class="submit" data-url="forgot.php">Forgot password?</button>
</form>

JQ:

$("#loginForm").on('click', '.submit', function (event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Get some values from elements on the page: */
    var values = $(this).closest('form').serialize();
    /* Send the data using post and put the results in a div */
    $.ajax({
        url: $(this).data('url'),
        /* here is echo var_dump($_POST); */
        type: "post",
        data: values,
        success: function (data) {
            $("#login-error").html(data);
        },
        error: function () {
            $("#result").html('There is error while submit');
        }
    });
});

Answer 3

It will be a lot easier to check if you name the submit input and the button differently.

You currently have this set up like this:

<input type="submit" name="submit" value="Login">
<button type="submit" name="submit" value="Forgot password?">Forgot password?</button>

Try changing the name of the button to something like:

name="forgot"

then you can run a check on it such as

if (isset($_POST['submit'])){

    stuff here

}

and a separate check for

if (isset($_POST['forgot'])){

    stuff here

}

Answer 4

If there is not event in function then it will not prevent the submit function and by default get will be called and and $_POST will be empty for sure Change

 $("#loginForm").click(function(){
        /* Stop form from submitting normally */
        event.preventDefault();

To

$("#loginForm").click(function(event){
    /* Stop form from submitting normally */
    event.preventDefault();

Make one more change

data: values,

To

data:$("#loginForm").serialize(),

Remove one submit type there should be only one submit type make it type of button and call onbutton click functiuon to submit via ajax it will work same as submit.