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

时间:2015-06-08 10:15:02

标签: javascript php jquery ajax forms

问题

我有一个使用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 / 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输入值?

2 个答案:

答案 0 :(得分:2)

因为您已停用input[type="submit"]

从你的代码:

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

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

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

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

答案 1 :(得分:0)

距离这个问题被分享的时间大约有十亿年,但希望这对某人有所帮助。 我遇到了同样的问题,并且这是我使用的解决方案:

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

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