如何在提交按钮上多次单击时仅在数据库中插入一条记录

Posted 2021-03-27

我正在使用CodeIgniter。我有一个表格和字段是Name, Email, Mobile no, Message。

我可以使用AJAX在数据库中提交数据。 AJAX没有问题。

现在我做了什么，我填写表格并单击提交按钮两次，然后我检查我的数据库，我发现两次相同的记录，因为两次点击。如果我在提交按钮上单击三次，那么我在数据库中三次获得相同的记录。

有没有办法阻止这个问题。就像一次点击应该在提交按钮上工作，直到数据库中的数据提交？

视图

<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
  }

}

答案

为正在进行的请求维护标志

<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>

另一答案

以下是您可以使用的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
  }
});