表单不通过Ajax提交“提交”输入

Issue

I have a form constructed using Bootstrap 3.

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

I post the data via Ajax to a PHP page "formhandle.php", which is used to handle all forms on the site.

我通过Ajax将数据发布到PHP页面“formhandle.php”,该页面用于处理网站上的所有表单。

However, the submit input information is not being sent.

但是,未发送提交输入信息。

HTML Form

<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 Submission

$('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 Code

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

Console Output

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

What Console Output I Expect

我期待的控制台输出

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

Why isn't the frmLogin_submit input value being posted?

为什么不发布frmLogin_submit输入值?

1 个解决方案

#1

Because you have disabled the input[type="submit"]

因为您已禁用输入[type =“submit”]

From your code:

从你的代码:

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

Disabled inputs,textareas are not submitted with the form.

禁用输入,textareas不与表单一起提交。

Suggestion: Set readonly to the input, if you don't want the user to interact with the button.

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

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

#1