这个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提交函数有什么问题？

回答

相关问题