jquery 提交表单并停留在同一页面无效

Question

下面的代码应该提交表单并停留在当前页面。它确实提交了表单，但它并没有停留在重定向到表单处理页面的同一页面上。我试过使用 event.preventDefault(); 和 return false; 但都没有停止重定向。我一次尝试一个，然后在函数的不同位置同时添加两个，但重定向仍然发生。

  function submitForm() {
    var $subForm = $('#signupForm')[0] ;
    if (!$subForm.checkValidity()) {
      $subForm.find(':submit').click() ;
      return ;
    }
    
    $subForm.submit(function(event){
      event.preventDefault(); // not working  here
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
        console.log(response) ;
      },'json');
      return false;  // not working here
    });
    return false ;  // not working here
  }

我的表单定义为：

<form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate>
    ....
    <button type="button" onclick='submitForm();' id="ccInfoButton" style="" class="btn btn-primary buttonSignup" disabled >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>
</form>

Answer 1

问题出在您尝试处理提交事件的位置。下面的代码实现了提交表单并停留在同一页面的目的。您可以看到它与下面的代码片段一起工作。

                function submitForm() {
                    console.log("SUBMIT BUTTON CLICKED");
                    var subForm = $('#signupForm')[0] ;
                    if (!subForm.checkValidity()) {
                        console.log("INVALID FORM SUBMISSION");
                        $('#signupForm').find(':submit').click() ;
                        return ;
                    }
                    $("#signupForm").submit();
                }

                $("#signupForm").submit(function(event){
                    console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
                    event.preventDefault(); // not working  here
                    $.post($(this).attr('action'), $(this).serialize(), function(response){
                            // do something here on success
                        console.log(response) ;
                    },'json');
                    return false;  // not working here
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate>
<input type="text" name="eee" required/>
<input type="submit" style="display: none;" required/>
<button type="button" onclick='submitForm();' id="ccInfoButton" class="btn btn-primary buttonSignup" >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>
</form>

        <!DOCTYPE html>
        <html>
        <body>

            <form method="POST" id="signupForm" action="submitSignup.php" enctype="multipart/form-data" validate>
                <input type="text" name="eee" required/>
                <input type="submit" style="display: none;" required/>
                <button type="button" onclick='submitForm();' id="ccInfoButton" class="btn btn-primary buttonSignup" >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>
            </form>

        </body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script type="text/javascript">

            function submitForm() {
                console.log("SUBMIT BUTTON CLICKED");
                var subForm = $('#signupForm')[0] ;
                if (!subForm.checkValidity()) {
                    console.log("INVALID FORM SUBMISSION");
                    $('#signupForm').find(':submit').click() ;
                    return ;
                }
                $("#signupForm").submit();
            }

            $("#signupForm").submit(function(event){
                console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
                event.preventDefault(); // now working 
                $.post($(this).attr('action'), $(this).serialize(), function(response){
                        // do something here on success
                    console.log(response) ;
                },'json');
                return false;  // not working here
            });
        </script>
        </html>

Answer 2

@DankyiAnnoKwaku - 感谢 Dankyi 让我走上正轨，但他的解决方案对我不起作用，我不得不对其进行更多调整：

 <script type="text/javascript">

        function submitForm() {
            console.log("SUBMIT BUTTON CLICKED");
            var subForm = $('#signupForm')[0] ;
            if (!subForm.checkValidity()) {
                console.log("INVALID FORM SUBMISSION");
                $('#signupForm').find(':submit').click() ;
                return ;
            }
            $("#signupForm").submit();
        }

        // Had to wrap the `submit(function(event)` in the root `$(document).ready ....`
        $(document).ready(function(event) {
          $("#signupForm").submit(function(event){
              console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
              event.preventDefault(); // now working 
              $.post($(this).attr('action'), $(this).serialize(), function(response){
                  // do something here on success
                  console.log(response) ;
            },'json');
              return false;  // not working here
          });
        }) ;
    </script>

jquery 提交表单并停留在同一页面无效

jquery submit form and stay on same page not working

javascript

jquery

form-submit