表单未通过 Ajax 提交“提交”输入答案

【问题标题】：Form not submitting "Submit" input via Ajax表单未通过 Ajax 提交“提交”输入
【发布时间】：2015-06-08 10:15:02
【问题描述】：

问题

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

我post将数据通过Ajax发送到一个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/Ajax 提交

$('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 输入值？

【问题讨论】：

@vamsikrishnamannem JavaScript 函数的最后一行是e.preventdefault()mate
抱歉问错了问题

标签： javascript php jquery ajax forms

【解决方案1】：

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

来自您的代码：

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

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

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

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

【讨论】：

完美，谢谢。我只是在更改disabled 属性之前添加了var data = new FormData(this); 行，并通过AJAX 发送了该变量。我需要更改 Bootstrap 的 disabled 属性以自动更改类
哦，我明白了，你找到了解决方案 :)

【解决方案2】：

距分享此问题已有十亿年了，但希望这对某人有所帮助。我遇到了同样的问题，这是我使用的解决方案：

    $.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,

【讨论】：