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