Question

我有登录表单，其中有两个按钮 - “登录”和“忘记密码？”我需要检查用户点击的按钮。

<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）说：

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

我正在尝试两种方式（输入类型=提交和按钮类型=提交），但没有一个发送“提交”值。

（我正在使用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');
        }
    });
});

请您知道问题出在哪里？我知道，关于按钮的价值有很多线索，但对我来说没有任何作用。我也试过这个例子： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_value2

Answer 1

.serializeArray（）或.serialize（）方法使用标准W3C规则来成功控制，以确定它应包含哪些元素;特别是该元素不能被禁用，并且必须包含name属性。没有提交按钮值被序列化，因为表单未使用按钮提交。来自文件选择元素的数据未被序列化。

请参照..

http://api.jquery.com/serialize

http://api.jquery.com/serializeArray

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

Answer 2

这是一种方法，使用特定的点击按钮名称属性来连接数据字符串：

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

但更好的方法是根据单击哪个按钮来定位特定的服务器端脚本，例如：

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

检查是否以不同方式命名提交输入和按钮会更容易。

您目前的设置如下：

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

尝试将按钮名称更改为：

name="forgot"

然后你可以对它进行检查，例如

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

    stuff here

}

并单独检查

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

    stuff here

}

Answer 4

如果函数中没有事件，那么它将不会阻止提交函数，默认情况下将调用get并且$ _POST将为空改变

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

要

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

再做一次改变

data: values,

要

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

删除一个提交类型应该只有一个提交类型使其成为按钮类型并调用onbutton click functiuon通过ajax提交它将与提交一样工作。

（button || input）type = submit - jQuery AJAX中$ _POST变量中的缺失值

4 个答案: