(button || input) type=submit - missing value in $_POST variable in jQuery AJAX

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

value attribute is going to show the name of the button on your web page?Isn't it? It's not treated as value like other fields have. But you can do it — Alive to die - Anant, May 09 '15 at 15:08
No, on a button the value attribute is used in a traditional manner as in, for passing a value. This is because buttons are used in the traditional manner — CodingInTheUK, May 09 '15 at 15:10
Just in case you haven't read this..http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked — Coder anonymous, May 09 '15 at 15:13
Beware, setting `name="submit"` you are overwriting default DOM `submit()` method. That's said, i'm quite sure this question is a dupe of: http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked BTW, seems more relevant to use the `submit` event of the FORM, not the click one. Do you really want to send data to server if e.g `email` is clicked??? — A. Wolff, May 09 '15 at 15:30
Hello A. Wolff, thank you for your reply. Okay, I edited it this way: ` ` And jquery to: `$("#loginForm").submit(function(event) {` So form is now sending only on click to the buttons. But `$_POST['action']` is still not set in both ways (input and button). I will check serialize suggestions. — JackDavis, May 09 '15 at 15:40
@JackDavis In fact, you could handle it like this: http://jsfiddle.net/26gdp7en/ But imho, you'd have better to target a different server script regarding the request is for login or 'forgot password' http://jsfiddle.net/26gdp7en/1/ — A. Wolff, May 09 '15 at 15:44
@A.Wolff Wolff Thank you very much, this is working well! Can you please post it as answer so I can accept it as solution? Thanks! — JackDavis, May 09 '15 at 15:54

score 5 · Answer 1 · edited May 23 '17 at 11:43

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

score 2 · Answer 2 · answered May 09 '15 at 15:15

2

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

}

answered May 09 '15 at 15:15

nomistic

2,902
4
20
36

The problem is that neither button value ever makes it to the server. – Pointy May 09 '15 at 15:21
Hello, thanks but there is other problem. Variable $_POST['submit'] is not set in any way so when I rename it to any other, it will not be set also. – JackDavis May 09 '15 at 15:25
oh right. sorry about that. See the suggestions regarding `.serializeArray() or .serialize() ` in the other answer. I was only addressing one small aspect. – nomistic May 09 '15 at 15:36

score 2 · Accepted Answer · answered May 09 '15 at 16:00

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

Varun Naharia · Answer 4 · 2015-05-09T15:37:54.137

0

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.

edited May 09 '15 at 15:37

answered May 09 '15 at 15:26

Varun Naharia

5,318
10
50
84

This is a good point regarding Firefox not using `window.event` model but i'm not sure how this answers question?! – A. Wolff May 09 '15 at 15:28
Hello, thanks but the result is the same. Should there be a difference in this case? – JackDavis May 09 '15 at 15:30

(button || input) type=submit - missing value in $_POST variable in jQuery AJAX

4 Answers4