Ajax sending multiple request on form submit

Question

What is happening here is when i click on the button first time it will not work, when i click 2nd time then it sends ajax request if, run it again then it will send *2 request of the last time request sent.

here is my code

 <?php 
$this->load->view("header.php");
$this->load->view("sidebar.php");

?>
<style type="text/css">
  .form-group .error{font-size: 12px;color: red;}
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       User Management

      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">User Management</a></li>
        <li>Add User</li>
      </ol>
    </section>
    <section class="content">
      <div class="row">
      <div class="col-md-6 col-md-offset-3">
      <div class="callout callout-success" style="display: none;" id="cm_main_success">
                <h4>Success!</h4>
                <p id="cm_main_msg"></p>
              </div>
      <div class="callout callout-danger" style="display: none;" id="cm_main_fail">
                <h4>Oh snap!</h4>
                <p id="cm_main_fmsg"></p>
              </div>
              </div>
        <div class="col-md-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Add User</h3>
            </div>
            <form role="form" id="add_user" name="add_user" method="post" >
            <div class="row">
              <div class="box-body col-md-12">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="exampleInputFirstName">First Name</label>
                  <input class="form-control" id="first_name" name="first_name" placeholder="Enter First Name" type="text">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Email address</label>
                  <input class="form-control" id="email_address" name="email_address" placeholder="Enter Email Address" type="email">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Contact</label>
                  <input class="form-control" id="contact" name="contact" placeholder="Enter Contact Number" type="text">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="exampleInputLastName">Last Name</label>
                  <input class="form-control" id="last_name" name="last_name" placeholder="Enter Last Name" type="text">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input class="form-control" id="password" name="password" placeholder="Enter Password" type="password">
                </div>
                <div class="form-group">
                  <label for="exampleInputFile">Profile picture</label>
                  <input id="profile_pic" name="profile_pic" type="file">
                </div>
              </div>
                 </div>
              </div>
              <div class="box-footer" style="text-align: center;">
               <div id="loading"><img src="<?php echo base_url();?>assets/admin/images/hex-loader2.gif" style="display: none;"></div>
                <button type="submit" class="btn btn-primary" id="btn_add_user">Add User</button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
<?php 
$this->load->view("footer.php");
?>

AJAX CODE

    $(document).ready(function(){

     $("#add_user").validate({
      rules: {
       first_name: {
        required: true,
        lettersonly: true
      },
      last_name:{
        required: true,
        lettersonly: true
      },
      email_address:{
        required: true,
        email: true
      },
      password:{
        required: true
      },
      contact:{
        required: true,
        digits: true
      },
      profile_pic:{
        extension: "jpg|png|jpeg"
      }
    },
    messages:{
      first_name: {required:"First Name cannot be empty",lettersonly: "Enter valid first name"},
      last_name: {required:"Last Name cannot be empty",lettersonly: "Enter valid last name"},
      email_address:{required:"Email Address cannot be empty",email:"Enter valid email address"},
      password:"Password cannot empty",
      contact:{required: "Contact cannot be empty",digits:"Enter valid contact number"},
      profile_pic:"Please select valid file .jpg, .png, .jpeg are allowed"
    },

    submitHandler: function (form) {
     $('#add_user').on('submit', function(e) { 
       e.preventDefault();  
       var form=document.getElementById('add_user');
       var fdata=new FormData(form); 
       $.ajax({
         type: "POST",
         url: '<?php echo base_url(); ?>Admin/add_members',
         data: fdata,
         processData: false,
          contentType: false,
         beforeSend: function () {
          $('#loading').show();
          $("#btn_add_user").hide();
          $('#cm_main_success').hide();
          $('#cm_main_fail').hide();
        },
        success: function(data){
          if(data == 1)
          {           
            $('#cm_main_success').show();
            $('#cm_main_msg').html("User added successfully");
            $('#cm_main_success').fadeOut(6000);  
            setTimeout(function(){ window.location.href = '<?php echo base_url();?>Admin/view_members'; }, 3000);
          }
          else if(data == 2)
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Email address already exist");
            $('#cm_main_fail').fadeOut(6000);
             me.data('requestRunning', false);
          }
          else
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Something Went Wrong!");
            $('#cm_main_fail').fadeOut(6000); 
          }
        },
        complete: function () {

          $('#loading').hide();
          $("#btn_add_user").show();

        }

      });

    });
    }

 }); 

   });

I have try most of the ajax answer provided on stack-overflow related to this topic. Please anyone who can help me out with this thing

Answer 1

The issue is because you are binding everytime on validation success. You need to simply use the submitHandler as

submitHandler: function (form) { //This is the form element you are already getting. You don't need to get the form again
       var fdata=new FormData(form); 
       $.ajax({
           //do further work

Answer 2

the issue is $('#add_user').on('submit', function(e) { after success validation, this tells that the form must be submitted again, after submit handler just process the form don't have a submit function again.

 $(document).ready(function(){

     $("#add_user").validate({
      rules: {
       first_name: {
        required: true,
        lettersonly: true
      },
      last_name:{
        required: true,
        lettersonly: true
      },
      email_address:{
        required: true,
        email: true
      },
      password:{
        required: true
      },
      contact:{
        required: true,
        digits: true
      },
      profile_pic:{
        extension: "jpg|png|jpeg"
      }
    },
    messages:{
      first_name: {required:"First Name cannot be empty",lettersonly: "Enter valid first name"},
      last_name: {required:"Last Name cannot be empty",lettersonly: "Enter valid last name"},
      email_address:{required:"Email Address cannot be empty",email:"Enter valid email address"},
      password:"Password cannot empty",
      contact:{required: "Contact cannot be empty",digits:"Enter valid contact number"},
      profile_pic:"Please select valid file .jpg, .png, .jpeg are allowed"
    },

    submitHandler: submitForm

 }); 

     function submitForm(){


       var form=document.getElementById('add_user');
       var fdata=new FormData(form); 
       $.ajax({
         type: "POST",
         url: '<?php echo base_url(); ?>Admin/add_members',
         data: fdata,
         processData: false,
          contentType: false,
         beforeSend: function () {
          $('#loading').show();
          $("#btn_add_user").hide();
          $('#cm_main_success').hide();
          $('#cm_main_fail').hide();
        },
        success: function(data){
          if(data == 1)
          {           
            $('#cm_main_success').show();
            $('#cm_main_msg').html("User added successfully");
            $('#cm_main_success').fadeOut(6000);  
            setTimeout(function(){ window.location.href = '<?php echo base_url();?>Admin/view_members'; }, 3000);
          }
          else if(data == 2)
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Email address already exist");
            $('#cm_main_fail').fadeOut(6000);
             me.data('requestRunning', false);
          }
          else
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Something Went Wrong!");
            $('#cm_main_fail').fadeOut(6000); 
          }
        },
        complete: function () {

          $('#loading').hide();
          $("#btn_add_user").show();

        }

      });



      return false;
     }

   });