Как вставить только одну запись в базу данных несколькими нажатиями на кнопку «Отправить»

Question

Я использую CodeIgniter. У меня есть форма и поля Name, Email, Mobile no, Message.

Я могу отправить данные в базу данных с помощью AJAX. С AJAX проблем нет.

Теперь, что я сделал, я заполняю форму и дважды нажимаю кнопку «Отправить», затем проверяю свою базу данных и обнаруживаю одни и те же записи дважды из-за двух кликов. Если я три раза нажму кнопку «Отправить», то получу те же записи в базе данных три раза.

Есть ли способ остановить эту проблему. Как в один клик должна работать кнопка «Отправить» до момента отправки данных в базу данных?

View

<div class="i_p_aboutTeam_alert" id="popup_verify-1" style="display: none;">
  <div class="profile_content">
    <div class="profile_header clearfix">
         <a href="javascript:void(0);" class="close_popup " onclick="closePopup();"><i class="fas fa-times"></i></a>
      </div>
   <div class="profile_body">
      <div class="form_heading">
      <h2>CONTACT FORM</h2>
   </div>
      <form action="" method="post" name="form" id="form" autocomplete="off">
         <div class="form-group ffl-wrapper">
            <label for="name" class="ffl-label">Name</label>
            <input type="text" name="name" class="form-control" id="name">
         </div>

         <div class="form-group ffl-wrapper">
            <label for="mobileno" class="ffl-label">Mobile Number</label>
            <input type="text" name="mobileno" class="form-control" id="mobileno">
         </div>

         <div class="form-group ffl-wrapper">
            <label for="email" class="ffl-label">Email</label>
            <input type="email" name="email" class="form-control" id="email">

         </div>
           <div class="form-group ffl-wrapper">
            <label for="message" class="ffl-label">Message</label>
            <textarea class="form-control" name="message" id="message"></textarea>
         </div>
         <div class="form-group text-center">
         <input type="submit" name="send" class="i_btn i_btn_bg  i_btn_round w_100p" value="Submit">
      </div>
      </form>
   </div>

  </div>
</div>

AJAX

$("#form").validate({
  rules: {
    name: {
      required: true,
      minlength: 3,
      lettersonly: true
    },
    mobileno: {
      required: true,
      minlength: 10,
      maxlength: 10,
      number: true
    },
    email: {
      required: true,
      email: true
    },
    message: {
      required: true,
      minlength: 10
    }
  },
  submitHandler: function(form) {
    //form.submit();
    $.ajax({
      url: "<?php echo base_url('Home_control/contact');?>",
      type: "POST",
      data: $('#form').serialize(),
      success: function(data) {
        $("#popup_verify-1").hide();
        $("#popup_success-1").show();
      },
    }); // AJAX Get Jquery statment
  }
});

Контроллер

public function contact() {
  $this -> form_validation -> set_error_delimiters('<div class="error">', '</div>');

  $this -> form_validation -> set_rules('name', 'Name', 'trim|required|min_length[3]');
  $this -> form_validation -> set_rules('mobileno', 'Mobile no', 'trim|required|regex_match[/^[0-9]{10}$/]');
  $this -> form_validation -> set_rules('email', 'email', 'required|valid_email');
  $this -> form_validation -> set_rules('message', 'Message', 'required');

  if ($this -> form_validation -> run() == FALSE) {
    //$this->index();
  } else {
    $form_data = array(
      'name' => $this -> input -> post('name', TRUE),
      'mobileno' => $this -> input -> post('mobileno', TRUE),
      'email' => $this -> input -> post('email', TRUE),
      'message' => $this -> input -> post('message', TRUE)
      );
    $success = $this -> db -> insert('form', $form_data);
    echo json_encode(array("data" => $success)); // return to the ajax
  }

}

Answer 1

Вот код AJAX, который вы можете использовать:

Решение 1: Если вы хотите отключить кнопку отправки, нажмите, пока не завершится вызов AJAX.

$.ajax({
    type: "POST",
    url: "<?php echo base_url('Home_control/contact');?>",
    data: $('#form').serialize(),
    beforeSend: function() { 
      $('#form').find("input[type='submit']").prop('disabled', true); // disable button
    },
    success:function(data){ 
      $("#popup_verify-1").hide();
      $("#popup_success-1").show();
      $('#form').find("input[type='submit']").prop('disabled', false); // enable button
    }
  });

Решение 2: Если вы не хотите отключать кнопку отправки, но не допускаете многократного использования вызова AJAX.

$("#form").validate({
var isCurrentReqInprogress = false;
...
...

submitHandler: function(form) {
    //form.submit();
    if(isCurrentReqInprogress){
      return;
    }
    isCurrentReqInprogress = true;
    $.ajax({
      url: "<?php echo base_url('Home_control/contact');?>",
      type: "POST",
      data: $('#form').serialize(),
      success: function(data) {
        $("#popup_verify-1").hide();
        $("#popup_success-1").show();
        isCurrentReqInprogress = false;
      },
    }); // AJAX Get Jquery statment
  }
});

Answer 2

поддерживать флаг для выполняющегося запроса

<script type="text/javascript">
  var isReqInprogress = false;
  $("#form").validate({
  rules: {
    name: {
      required: true,
      minlength: 3,
      lettersonly: true
    },
    mobileno: {
      required: true,
      minlength: 10,
      maxlength: 10,
      number: true
    },
    email: {
      required: true,
      email: true
    },
    message: {
      required: true,
      minlength: 10
    }
  },
  submitHandler: function(form) {
    //form.submit();
    if(isReqInprogress){
      return;
    }
    isReqInprogress = true;
    $.ajax({
      url: "<?php echo base_url('Home_control/contact');?>",
      type: "POST",
      data: $('#form').serialize(),
      success: function(data) {
        $("#popup_verify-1").hide();
        $("#popup_success-1").show();
        isReqInprogress = false;
      },
    }); // AJAX Get Jquery statment
  }
});

</script>