How to prevent page from refreshing after ajax submit

Question

I just started using Ajax function in my work and I'm not very familiar with it. I have this problem that when I submit data, it submits without refreshing the page, but on a second time when trying to submit, the page refreshes before submitting. I've used the e.preventDefault() to prevent the page from refreshing but it is not working for me. It just seems there is something I'm not doing right.

This is my Ajax code

<!--AJAX PROCESS TO SUBMIT CHECKED COURSES-->
    $(document).ready(function(){
        loadNewCourse();
        loadDelTable();
        $('#submit').click(function(){
            $('#form').submit(function(e){ 
            e.preventDefault();
                var in_arr = [],
                    name = ("<?php echo $_SESSION['name']?>"),
                    email = ("<?php echo $_SESSION['email']?>"),
                    regno = ("<?php echo $_SESSION['regno']?>"),
                    level = ("<?php echo $_SESSION['level']?>"),
                    dept = ("<?php echo $_SESSION['dept']?>"),
                    semester = ("<?php echo $_SESSION['semester']?>");
                    $('.inChk').each(function(i){
                        var checked = $(this).is(':checked');
                        if(checked){
                            in_arr.push($(this).val());
                        }
                    });
                    $.ajax({
                    url: 'submit.php',
                    type: 'POST',
                    cache: false,
                    async: false,
                    data: {
                        post_inId : in_arr,
                        name : name,
                        email : email,
                        regno : regno,
                        level : level,
                        dept : dept,
                        semester : semester
                        },
                    success: function(data){
                        loadNewCourse();
                        loadDelTable();
                        // setTimeout(function(){
                        //     $('#regModal').modal('hide');
                        // }, 1000);
                        $('body').removeAttr('style');
                        $('#regModal').removeAttr('style');
                        $('.modal-backdrop').remove();
                        swal({
                            // "Success", "Registration successful", "success"
                            position: "top-end",
                            type: "success",
                            title: "Registration successful",
                            showConfirmButton: false,
                            timer: 2000
                        })
                    },
                    error: function(data){
                        swal("Oops...", "Registration failed.", "error");
                    }
                });
            });
        });

////////////////////////////////////////////////////////////////////////////////////////
// PROCESS AJAX DELETE ON CHECKBOX SELECT
$('#deleteCheck').click(function(){
    $('#delform').submit(function(e){
    e.preventDefault();
        var id_arr = [],
            regno = ("<?php echo $_SESSION['regno']?>"),
            level = ("<?php echo $_SESSION['level']?>");
        $('.delChk').each(function(i){
            var checked = $(this).is(':checked');
            if(checked){
                id_arr.push($(this).val());
            }
        });
        swal({
                title: "Are you sure you want to delete selected courses?",
                text: "You can add these courses by registering again!",
                type: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, delete!",
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                closeOnConfirm: false
            },
            function(isConfirm){
                if(isConfirm){
                $.ajax({
                    type: "POST",
                    url: "submit.php",
                    data: {
                        post_id : id_arr,
                        regno : regno,
                        level : level
                        },
                    cache: false,
                    async: false,
                    success: function(data){
                        // console.log(data);
                        loadDelTable();
                        loadNewCourse();
                        swal({
                                // "Success", "Registration successful", "success"
                                position: "top-end",
                                type: "success",
                                title: "Delete successful",
                                showConfirmButton: false,
                                timer: 2000
                            })
                    },
                    error: function(data){
                        swal("Oops...", "Delete failed.", "error");
                    }
                });
            }else{
                // alert('isNotConfirm and is not success');
                swal("Oops...", "Delete failed", "error");
            }
        });
        return false;
///////////////////////////////////////////////////////////////////////////////////////////
    });
});

    function loadNewCourse(){
        $.ajax({
            url: 'processReg.php',
            type: 'POST',
            cache: false,
            async: false,
            data: {
                loadit : 1
            },
            success: function(disp){
                $("#reveal").html(disp).show();
            }
        });
    }
    
    function loadDelTable(){
        $.ajax({
            url: 'delete_tbl.php',
            type: 'POST',
            cache: false,
            async: false,
            data: {
                loadDel : 1
            },
            success: function(deldisp){
                $("#showRegtbl").html(deldisp).show();
            }
        });
    }
});

And this is the page displaying submitted data

 <div class="" style="margin:auto;margin-top:0;text-align:center">
            <div class="" >
                <h2 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;letter-spacing:5px;font-weight:100;color:#061931;">Welcome!</h2>
                <p style="width:100%;font-size:14px;text-align:center;padding:5px;background:whitesmoke;padding:20px;">If this is your first visit, click on <b>Register Courses</b> to register courses available for you. <br>If you are re-visiting, you can continue where you left off.<br><a href="#regModal" data-toggle="modal" data-target="#regModal"><span class="btn btn-md btn-primary" style="letter-spacing:3px;margin-top:10px;"><b>Register Courses</b></span></a></p>
            </div>
        </div><br>
            <!--Display Courses that are available-->
                <span id="reveal"></span>

            <!--Table to display courses registered-->
                <span id="showRegtbl"></span>
    </div>
</div>

I've been stuck in this for more than 3days now. Can anyone here help me out pls?

Answer 1

I think you misunderstood the submission of the form and even handling.

The default action of the form ie submit can be done with input type="submit" or <button>

The default

 <h2> Form default action </h2> <form action=""> <input type="hidden" id="someInput" value="hey"> <input type="submit" value="submit"> </form>

To prevent form's default action you can do 2 things.

Avoid using type="submit" or button

Do something like this

 function customForm(){ alert("Hey this is custom handler, dont worry page will not refresh...!"); }

 <h2> Form with custom action </h2> <form action=""> <input type="hidden" id="someInput" value="hey"> <input type="button" value="submit" onclick="customForm()"> </form>

Use event.preventDefault()

 $('#myform').submit(function(e){ e.preventDefault(); alert("custom handler with preventDefault(), no reload no worries...!"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2> Form with custom handler using preventDefault() </h2> <form id="myform" action=""> <input type="hidden" id="someInput" value="hey"> <input type="submit" value="submit" onsubmit="customForm(this)"> </form>

For any queries comment down.

Answer 2

Calling $("#form").submit(function() { ... }) creates a handler for the next time the form is submitted. Doing this inside the handler for $("#submit").click() is not correct. Clicking the submit button will establish a handler for the next submission, but then the default action will submit the form immediately, which refreshes the page. Putting e.preventDefault() inside the click handlers would prevent the reload, but then you would have to click twice to submit the form (and this wouldn't actually work, because the default action of a submit button is to trigger the submit event, and you're preventing that).

Just create submit handlers for each form, without doing it inside a click handler.

$(document).ready(function() {
  loadNewCourse();
  loadDelTable();
  $('#form').submit(function(e) {
    e.preventDefault();
    var in_arr = [],
      name = ("<?php echo $_SESSION['name']?>"),
      email = ("<?php echo $_SESSION['email']?>"),
      regno = ("<?php echo $_SESSION['regno']?>"),
      level = ("<?php echo $_SESSION['level']?>"),
      dept = ("<?php echo $_SESSION['dept']?>"),
      semester = ("<?php echo $_SESSION['semester']?>");
    $('.inChk').each(function(i) {
      var checked = $(this).is(':checked');
      if (checked) {
        in_arr.push($(this).val());
      }
    });
    $.ajax({
      url: 'submit.php',
      type: 'POST',
      cache: false,
      async: false,
      data: {
        post_inId: in_arr,
        name: name,
        email: email,
        regno: regno,
        level: level,
        dept: dept,
        semester: semester
      },
      success: function(data) {
        loadNewCourse();
        loadDelTable();
        // setTimeout(function(){
        //     $('#regModal').modal('hide');
        // }, 1000);
        $('body').removeAttr('style');
        $('#regModal').removeAttr('style');
        $('.modal-backdrop').remove();
        swal({
          // "Success", "Registration successful", "success"
          position: "top-end",
          type: "success",
          title: "Registration successful",
          showConfirmButton: false,
          timer: 2000
        })
      },
      error: function(data) {
        swal("Oops...", "Registration failed.", "error");
      }
    });
  });

  ////////////////////////////////////////////////////////////////////////////////////////
  // PROCESS AJAX DELETE ON CHECKBOX SELECT
  $('#delform').submit(function(e) {
    e.preventDefault();
    var id_arr = [],
      regno = ("<?php echo $_SESSION['regno']?>"),
      level = ("<?php echo $_SESSION['level']?>");
    $('.delChk').each(function(i) {
      var checked = $(this).is(':checked');
      if (checked) {
        id_arr.push($(this).val());
      }
    });
    swal({
        title: "Are you sure you want to delete selected courses?",
        text: "You can add these courses by registering again!",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, delete!",
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger',
        closeOnConfirm: false
      },
      function(isConfirm) {
        if (isConfirm) {
          $.ajax({
            type: "POST",
            url: "submit.php",
            data: {
              post_id: id_arr,
              regno: regno,
              level: level
            },
            cache: false,
            async: false,
            success: function(data) {
              // console.log(data);
              loadDelTable();
              loadNewCourse();
              swal({
                // "Success", "Registration successful", "success"
                position: "top-end",
                type: "success",
                title: "Delete successful",
                showConfirmButton: false,
                timer: 2000
              })
            },
            error: function(data) {
              swal("Oops...", "Delete failed.", "error");
            }
          });
        } else {
          // alert('isNotConfirm and is not success');
          swal("Oops...", "Delete failed", "error");
        }
      });
    return false;
    ///////////////////////////////////////////////////////////////////////////////////////////
  });

  function loadNewCourse() {
    $.ajax({
      url: 'processReg.php',
      type: 'POST',
      cache: false,
      async: false,
      data: {
        loadit: 1
      },
      success: function(disp) {
        $("#reveal").html(disp).show();
      }
    });
  }

  function loadDelTable() {
    $.ajax({
      url: 'delete_tbl.php',
      type: 'POST',
      cache: false,
      async: false,
      data: {
        loadDel: 1
      },
      success: function(deldisp) {
        $("#showRegtbl").html(deldisp).show();
      }
    });
  }
});

If you had multiple submit buttons in the same form you would instead assign click handlers to each button, but not create submit handlers for the form.

Answer 3

Thanks everyone for the assistance. I did some debugging on my end and was able to fix the issue by removing the form tags from the Add and Delete scripts and then include them in the page displaying the submitted data. Like this...

<div class="" style="margin:auto;margin-top:0;text-align:center">
            <div class="" >
                <h2 class="#" style="font-family: 'proxima-nova','Helvetica Neue',Helvetica,arial,sans-serif;letter-spacing:5px;font-weight:100;color:#061931;">Welcome!</h2>
                <p style="width:100%;font-size:14px;text-align:center;padding:5px;background:whitesmoke;padding:20px;">If this is your first visit, click on <b>Register Courses</b> to register courses available for you. <br>If you are re-visiting, you can continue where you left off.<br><a href="#regModal" data-toggle="modal" data-target="#regModal"><span class="btn btn-md btn-primary" style="letter-spacing:3px;margin-top:10px;"><b>Register Courses</b></span></a></p>
            </div>
        </div><br>
  <!--Display Courses that are available-->
<form id='form' action='POST' href='#'>
   <span id="reveal"></span>
</form>

<!--Table to display courses registered-->
<form id='delform' action='POST' href='#'>
   <span id="showRegtbl"></span>
</form>
    </div>
</div>

Is there a more proper way to do this or this is just okay? Thank you for the help so far.