這個jQuery提交函數有什麼問題？

除提交功能外，此代碼運行平穩。如果我用另一個函數如「show（）;」來更改提交函數有用。爲什麼不運行這個提交函數？ jQuery的：這個jQuery提交函數有什麼問題？

$(document).ready(function(){ 
    $('#submit').click(function(){ 
     var email = $('#email').val(); 
     email = $.trim(email); 
     var password = $('#password').val(); 
     password = $.trim(password); 

      if(email == "" || password == "") { 
       $('.division').show(); 
      }else{ 
       $('#form').submit(); 
      } 
     }) 
    });

這是我的形式：

<form id="form" method="post" action="run.php"> 
<input type="text" id="email" name="email"> 
<input type="password" id="password" name="password"> 
<input type="checkbox" checked="checked" id="keep" value="yes"> 
<label for="keep">Keep login</label> 
<input type="submit" id="submit" value="Sign in" onClick="return false;"> 
</form>

來源

2014-08-28 nijamitsu

謝謝你，我做到了。 – nijamitsu 2014-08-28 17:52:38

問題是，你已經給你的提交按鈕id"submit"。瀏覽器使用id將元素添加到form對象中，因此表單的正常submit函數將被對提交按鈕的引用所替代。

將提交按鈕的名稱（可能是id）更改爲（比如說）submit-btn，它將起作用。 Live Example

另外，雖然，我不會在提交按鈕上掛鉤click;我將鉤子提交到表單元素上，因爲表單可以用其他方式提交（例如，在某些表單字段中按Enter鍵）。

例子：Live Copy

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    </head> 
    <body> 
    <script> 
     $(document).ready(function(){ 
     $('#form').submit(function(e){ 
      var email = $('#email').val(); 
      email = $.trim(email); 
      var password = $('#password').val(); 
      password = $.trim(password); 

      if(email == "" || password == "") { 
      $('.division').show(); 
      e.preventDefault(); // Don't allow the form submission 
      }else{ 
      $('#form').submit(); 
      } 
     }) 
     }); 
    </script> 
    <!-- Using GET rather than POST, and no action 
    attribute, so that it posts back to the jsbin page --> 
    <form id="form" method="get"> 
     <input type="text" id="email" name="email"> 
     <input type="password" id="password" name="password"> 
     <input type="checkbox" checked="checked" id="keep" value="yes"> 
     <label for="keep">Keep login</label> 
     <input type="submit" value="Sign in"> 
    </form> 
    <div class="division" style="display: none">Please fill in an email and password</div> 
    </body> 
</html>

來源

2014-08-28 18:25:42

我已經改變了ID，它已經完全工作。非常感謝。 – nijamitsu 2014-08-28 19:37:56

@nijamitsu：不客氣。這是那些糟糕的副作用之一。 :-) – 2014-08-28 21:05:42

在你輸入元素，你有onClick="return false;"此功能的onClick正在優先於您在jQuery的定義單擊處理程序。如果你刪除了input元素的onClick部分，你的jQuery代碼將會運行。

另外，您的提交代碼存在問題，因爲它從未實際阻止POST到服務器。看到我的編輯如下：

  if(email == "" || password == "") { 
       $('.division').show(); 
       return false; 
      }else{ 
       ('#form').submit(); 
      }

您必須顯式返回false以防止表單提交到服務器。或者，您可以完全刪除else子句，因爲如果該函數沒有顯式返回false，它將完成並繼續進行表單提交。

另請注意，對於表單提交，通常使用onSubmit事件而不是onClick事件，因爲可以在技術上通過點擊「輸入」鍵以及單擊「提交」按鈕來提交表單。使用onClick時，通過按回車鍵不會觸發提交。

來源

2014-08-28 18:06:29 james00794

這個jQuery提交函數有什麼問題？

回答

相關問題