jquery 提交表单并停留在同一页面不起作用

Question

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

  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 提交表单并停留在同一页面不起作用

问题描述

2 个解决方案

解决方案1
0 2021-12-06 05:36:10

解决方案2
0 已采纳 2021-12-07 16:19:34

jquery 提交表单并停留在同一页面不起作用

问题描述

2 个解决方案

解决方案1 0 2021-12-06 05:36:10

解决方案2 0 已采纳 2021-12-07 16:19:34

解决方案1
0 2021-12-06 05:36:10

解决方案2
0 已采纳 2021-12-07 16:19:34