Ajax avoid reload the page

Question

I a trying to make a validation on the ajax to the backend, and sending the data and working fine, but I have a problem when data returns from backend because it's reloading the page and deleting the returned message

    <script>

    $(document).ready(function() {
  // Cache selectors to make them a bit shorter and more performant
    $pwd_error = $('#password_result_error').hide();
  $pwd_blank = $('#current_password_blank').hide();

  $('#new_password').focus(function(event) {
    data = $('#current_password').val();
    var len = data.length;
    if (len < 1) {
      //alert("Password cannot be blank");
      $pwd_blank.show();

    } else {
      $pwd_blank.hide();
    }

    $('#change_password').click(function() {

    if ($('#new_password').val() != $('#confirm_new_password').val()) {
       $pwd_error.show();
    } else {

      $pwd_error.hide();


    }
  });
});
  // Attach listener globally (and only once)
  $('form#form_change_password').submit(function(e) {
    if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
      e.preventDefault();

    } else {
        var change_password = $("#form_change_password").serialize();
                 $.post(
                        "backend/ajax/update_password.php",
                        change_password
                 ).done(function(data) {

                        $("#change_password_result").html(data);


                 }).fail(function () {
                          //alert("Error submitting forms!");
                 })

    }
  });
});

     </script>

     <hr>
     <div class="container text-center">
     <h1><?php $lang ['change_password']; ?></h1>
      <form id="form_change_password">
     <div class="form-group">
   <!--  <label for="current_password"><?php echo $lang 'current_password']; ?> </label> -->
    <input type="password" class="form-control" id="current_password" name="current_password" placeholder="<?php echo $lang ['current_password']; ?>">
    </div>
    <div id="current_password_blank" class="alert-danger"><i  class="fa fa-exclamation-circle"></i>&nbsp;<?php echo $lang ['current_password_can_not_be_blank']; ?></div>
     <div class="form-group">
    <label for="new_password"><?php echo $lang ['new_password']; ?></label>
    <input type="password" class="form-control" id="new_password" name="new_password" placeholder="<?php echo $lang ['new_password']; ?>">
    </div>
    <div class="form-group">
    <label for="confirm_new_password"><?php echo $lang ['confirm_new_password']; ?></label>
     <input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="<?php echo $lang ['confirm_new_password']; ?>">
    </div>
    <div id="password_result_error" class="alert-danger"><i  class="fa fa-exclamation-circle"></i>&nbsp;<?php echo $lang ['password_do_not_match']; ?></div>
    <div id="change_password_result"></div>
    <div class="text-center">
  <button type="submit" id="change_password" class="btn btn-success"><?php echo $lang ['change_password']; ?></button>
  </div></form>
    </div>

I tried to prevent the reload on submit but it do not send data via ajax, this code is working fine right now but I need prevent reload on submit but also do not affect ajax on it. How to prevent the page from reload on submit, without affect the ajax data sent to the backend?

Answer 1

$('form#form_change_password').submit(function (e) {
    e.preventDefault();
    if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
        // Don't call the api if form has error
        return
    }
    var change_password = $("#form_change_password").serialize();
    $.post(
        "backend/ajax/update_password.php",
        change_password
    ).done(function (data) {
        $("#change_password_result").html(data);
    }).fail(function () {
        //alert("Error submitting forms!");
    })
});