2015-06-08 123 views
0

問題「提交」輸入表單提交不通過Ajax

我一直在使用引導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 /阿賈克斯提交

$('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輸入值被張貼?

+0

@vamsikrishnamannem JavaScript函數的最後一行是'e.preventdefault()'隊友 – Ben

+0

不好意思問錯了問題 –

回答

2

因爲你已經禁用了input[type="submit"]

從代碼:

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

禁用的輸入,文字區域不與表單提交。

建議: 將readonly設置爲輸入,如果您不希望用戶與按鈕交互。

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

+0

完美,謝謝。我在添加'var data = new FormData(this)'這一行後,改變'disabled'屬性並通過AJAX發送了這個變量。我需要改變Bootstrap的'disabled'屬性來自動改變這個類 – Ben

+0

哦,我明白了,你找到了你的解決方案:) –