Question

除提交功能外，此代码运行顺畅。如果我用另一个函数更改提交函数，例如＆＃34; show（）;＆＃34;有用。为什么不运行此提交功能？ 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>

Answer 1

在你的input元素中，你有onClick="return false;"这个onClick函数优先于你在jQuery中定义的click处理程序。如果删除input元素的onClick部分，jQuery代码将会运行。

除此之外，您的提交代码存在问题，因为它实际上从未阻止POST到服务器。请参阅下面的编辑：

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

您必须显式返回false以防止表单提交到服务器。或者，你可以完全删除else子句，因为如果函数没有明确地返回false，它将完成并继续表单提交。

另请注意，对于表单提交，通常最好使用onSubmit事件而不是onClick事件，因为在技术上可以通过点击“输入”来提交表单。键，以及单击提交按钮。使用onClick时，不会通过按Enter键触发提交。

Answer 2

问题是您已经在id "submit"提交了提交按钮。浏览器使用form向id对象添加元素，因此表单的正常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>

这个jQuery提交功能有什么问题？

2 个答案: