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

Question

Issue

I have a form constructed using Bootstrap 3.

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

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?

Answer 1

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

From your code:

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

Disabled inputs,textareas are not submitted with the form.

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

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

Answer 2

it is like a billion years from the time this question was share but hope this helps someone. i had same problem, and this is the solution i used:

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

don't know how risky this might be, but all things being equal, this seems to be a quick fix to the problem.

Edited: Someone contacted me to complain that this code was not working.

After I reviewed his code, I saw that he had used a different name for the submit input which was not "submit", So I'm here to review my answer to make it more dynamic.

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