jquery submit form and stay on same page not working

Question

The code below is supposed to submit the form and stay on the current page. It does submit the form, but it doesn't stay on the same page as it redirects to the form processing page. I have tried using event.preventDefault(); and return false; but neither are stopping the redirect. I tried them one at a time and then later added both at the same time and at different locations in the function, but the redirect still happens.

  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
  }

My form is defined as:

<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

The issue is because of where you are trying to handle the submit event. The code below achieves the goal of submitting the form and staying on the same page. You can see it work with the code snippet below.

 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 - kudos to Dankyi for getting me on the right track, but his solution didn't work for me, I had to adapt it a bit more:

 <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 submit form and stay on same page not working

Question

2 answers

solution1
0 2021-12-06 05:36:10

solution2
0 ACCPTED 2021-12-07 16:19:34

jquery submit form and stay on same page not working

Question

2 answers

solution1 0 2021-12-06 05:36:10

solution2 0 ACCPTED 2021-12-07 16:19:34

solution1
0 2021-12-06 05:36:10

solution2
0 ACCPTED 2021-12-07 16:19:34