表单未提交“；提交”；通过Ajax输入 - Form not submitting "Submit" input via Ajax

问题

我有一个使用Bootstrap 3构建的表单。

我通过Ajax将数据post发送到一个PHP页面"formhandle.PHP"，该页面用于处理网站上的所有表单。

然而，submit输入信息没有被发送。

HTML表单

<form role="form" id="frmLogin" action="dashboard/inc/formhandle.php">
    <p class="text-danger frmLogin_error" style="display:none;">Invalid username/password combination</p>
    <div class="form-group">
        <label for="frmLogin_username">Username/domain</label>
        <input id="frmLogin_username" name="username" type="text" class="form-control" placeholder="example.com">
    </div>
    <div class="form-group">
        <label for="frmLogin_password">Password</label>
        <input id="frmLogin_password" name="password" type="password" class="form-control" placeholder="Password">
    </div>
    <input type="submit" name="frmLogin_submit" value="Login" class="btn btn-default" />
</form>

jQuery/AjaxSubmission

$('form').submit( function(e) {
    var formName = $(this).attr('id');
    $('#'+formName).find('.'+formName+'_error').hide();
    $(this).find('input[type=submit]').prop('disabled',true);
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url : formURL,
        type: "POST",
        //async: false,
        data : new FormData(this),
        success:function(data, textStatus, jqXHR) {
            console.log(data);
            if(data=='success'){
                console.log('success');
            } else {
                $('#'+formName).find('.'+formName+'_error').show();
            }
            $('#'+formName).find('input[type=submit]').prop('disabled',false);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Error: An unknown error occurred.');
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
});

PHP代码

require_once('connect.php');
require_once('functions.php');
exit(print_r($_POST));
if(isset($_POST['frmLogin_submit'])){
    $username = $_POST['username'];
    $password = $_POST['password'];
    $stmt = $dbh->prepare('SELECT * FROM `users` 
                            WHERE (`username`=? AND `password`=?)
                            OR (`email`=? AND `password`=?');
    if($stmt->execute(array($_POST['username'],$_POST['password'],$_POST['username'],$_POST['password']))){
        if($stmt->rowCount()>1) exit('error: invalid data');
        $userData = $stmt->fetch(PDO::FETCH_ASSOC);
        validateUser($userData['id']);
        exit('success');
    }
}

控制台输出

Array
(
    [username] => username_input
    [password] => password_input
)
1

我期望的控制台输出

Array
(
    [username] => username_input
    [password] => password_input
    [frmLogin_submit] => Login
)
1

为什么没有发布frmLogin_submit输入值？

因为您禁用了input[type="submit"]

从您的代码：

 $(this).find('input[type=submit]').prop('disabled',true);

禁用输入，文本区域不与表单一起提交。

建议：如果不希望用户与按钮交互，请将readonly设置为输入。

$(this).find('input[type=submit]').prop('readonly',true);

这个问题被分享已经10亿年了，但希望这能帮助到别人。我遇到了同样的问题，这就是我使用的解决方案：

    $.ajax({
       type: "POST",
       url: url,
       data: form.serialize()+"&submit="+document.activeElement.value,

不知道这可能有多危险，但在所有条件相同的情况下，这似乎是解决问题的快速方法。

编辑：有人联系我抱怨这个代码不起作用。

在我查看了他的代码后，我发现他对提交输入使用了不同的名称，而不是"；提交"；，所以我在这里复习一下我的答案，让它更有活力。

    $.ajax({
       type: "POST",
       url: url,
       data: form.serialize()+"&"+document.activeElement.name+"="+document.activeElement.value,