（button || input）type = submit - jQuery中的$ _POST變量缺少值AJAX

Question

我有登錄表單，其中有兩個按鈕 - 「login」和「忘記密碼？我需要檢查用戶點擊了哪個按鈕。

<form id="loginForm"> 
<div class="login-error" id="login-error"></div> 
<input type="text" id="email" name="email"> 
<input type="password" id="password" name="password"> 
<input type="submit" name="submit" value="Login"> 
<button type="submit" name="submit" value="Forgot password?">Forgot password?</button> 
</form> 

的var_dump（$ _ POST）說：

array(2) { ["email"]=> string(0) "" ["password"]=> string(0) "" } 

我想兩者兼得（輸入類型=提交和按鈕類型=提交），但沒有人送 「提交」 值。

（我使用jQuery的AJAX）

$("#loginForm").click(function(){ 
    /* Stop form from submitting normally */ 
    event.preventDefault(); 

    /* Get some values from elements on the page: */ 
    var values = $(this).serialize(); 

    /* Send the data using post and put the results in a div */ 
    $.ajax({ 
     url: "login.php", /* here is echo var_dump($_POST); */ 
     type: "post", 
     data: values, 
     success: function(data){ 
      $("#login-error").html(data); 
     }, 
     error:function(){ 
      $("#result").html('There is error while submit'); 
     } 
    }); 
}); 

請你知不知道哪裏出了問題，可以嗎？我知道，關於按鈕的價值有很多線索，但沒有任何適用於我的作品。我也試過這個例子： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_value2

Answer 1

這是爲了做這件事，concatening數據串與特定的點擊按鈕的名稱屬性：

HTML：

<form id="loginForm"> 
    <div class="login-error" id="login-error"></div> 
    <input type="text" id="email" name="email"> 
    <input type="password" id="password" name="password"> 
    <button type="button" name="login" class="submit">Login</button> 
    <button type="button" name="forgot" class="submit">Forgot password?</button> 
</form> 

JQ：

$("#loginForm").on('click', '.submit', function (event) { 

    /* Stop form from submitting normally */ 
    event.preventDefault(); 

    /* Get some values from elements on the page: */ 
    var values = $(this).closest('form').serialize() + '&' + this.name; 
    console.log(values); 
    /* Send the data using post and put the results in a div */ 
    $.ajax({ 
     url: "login.php", 
     /* here is echo var_dump($_POST); */ 
     type: "post", 
     data: values, 
     success: function (data) { 
      $("#login-error").html(data); 
     }, 
     error: function() { 
      $("#result").html('There is error while submit'); 
     } 
    }); 
}); 

但是更好的將是目標具體的服務器端腳本取決於哪個按鈕被點擊，例如：

HTML：

<form id="loginForm"> 
    <div class="login-error" id="login-error"></div> 
    <input type="text" id="email" name="email"> 
    <input type="password" id="password" name="password"> 
    <button type="button" name="login" class="submit" data-url="login.php">Login</button> 
    <button type="button" name="forgot" class="submit" data-url="forgot.php">Forgot password?</button> 
</form> 

JQ：

$("#loginForm").on('click', '.submit', function (event) { 

    /* Stop form from submitting normally */ 
    event.preventDefault(); 

    /* Get some values from elements on the page: */ 
    var values = $(this).closest('form').serialize(); 
    /* Send the data using post and put the results in a div */ 
    $.ajax({ 
     url: $(this).data('url'), 
     /* here is echo var_dump($_POST); */ 
     type: "post", 
     data: values, 
     success: function (data) { 
      $("#login-error").html(data); 
     }, 
     error: function() { 
      $("#result").html('There is error while submit'); 
     } 
    }); 
}); 

Answer 2

這將是一個很容易檢查，如果你命名提交輸入和按鈕不同。

您目前有這樣的設置是這樣的：

<input type="submit" name="submit" value="Login"> 
<button type="submit" name="submit" value="Forgot password?">Forgot password?</button> 

嘗試更改按鈕的名稱是這樣的：

name="forgot" 

那麼你就可以在其上運行的檢查，如

if (isset($_POST['submit'])){ 

    stuff here 

} 

並單獨檢查

if (isset($_POST['forgot'])){ 

    stuff here 

} 

Answer 3

.serializeArray（）或.serialize（）方法使用標準的W3C規則來控制成功，以確定它應包含哪些元素;特別是該元素不能被禁用，並且必須包含一個名稱屬性。由於未使用按鈕提交表單，所以沒有提交按鈕值被序列化。來自文件選擇元素的數據不會被序列化。

請參閱..

http://api.jquery.com/serialize

http://api.jquery.com/serializeArray

jQuery serializeArray doesn't include the submit button that was clicked

Answer 4

如果沒有事件的功能，那麼它不會阻止提交功能，默認情況下得到的將被調用，並且$ _ POST將是空的肯定 更改

$("#loginForm").click(function(){ 
     /* Stop form from submitting normally */ 
     event.preventDefault(); 

要

$("#loginForm").click(function(event){ 
    /* Stop form from submitting normally */ 
    event.preventDefault(); 

作一次改變

data: values, 

要

data:$("#loginForm").serialize(), 

刪除一個提交類型應該只有一個submit類型使它類型的按鈕和通話onbutton點擊functiuon通過提交阿賈克斯將與提交一樣工作。