When I click a button it didn't sends data to changePassword.php through ajax jquery

Question

This is the form through which I want to send data to changePassword.php . but it didn't send data.

<form class="form-horizontal" method="post">
    <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">Current Password</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="current_password" name="current_password" placeholder="Name">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">New Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">Confirm Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" name="changePassword" id="changePassword"  class="btn btn-primary">Change Password</button><br><br><br><br><br>
        </div>
    </div>
</form>

This is the Ajax code through which the data is sent to changePassword.php .

$("#changePassword").click(function(event) {
     var old_pass = $('#current_password').val();
     var new_pass =  $('#new_password').val();
     var conf_pass = $('#confirm_password').val();

     $.ajax({
          url: "ajax/changePassword.php",
          type: "post",
          data: ({ old_pass: old_pass, new_pass: new_pass, conf_pass: conf_pass}),
          success: function(data){

          }
     });
});

And this is the changePassword.php page.

 <?php
    session_start();
    include"../include/connection.php";

     if (!isset($_SESSION['FT_id']))
            {

            }

    $single_user=$_SESSION['FT_id'];
    $query="select * from faculty where faculty_phone=$single_user";
    $cm=sqlsrv_query($conn,$query);
    $resultFT = sqlsrv_fetch_array($cm);        

           echo $password = $_POST['old_pass']; exit;    

    ?>

Answer 1

You need to stop browser event propagation when button was clicked. The browser was submitting the form to the current page, and starting the AJAX call concurrently, but the page reload is faster and stop the AJAX call.

To do this, change your jQuery code to this:

$('#changePassword').click ( function ( event)
{
  event && event.preventDefault ();

  $.ajax (
  {
    url: 'ajax/changePassword.php',
    type: 'POST',
    data:
    {
      old_pass: $('#current_password').val (),
      new_pass: $('#new_password').val (),
      conf_pass: $('#confirm_password').val ()
    },
    success: function ( data)
    {
      alert ( 'Password changed!');
    }
  });
});