（button || input）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

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, e.g:

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