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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在提交按钮上多次单击时仅在数据库中插入一条记录相关的知识,希望对你有一定的参考价值。

我正在使用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
  }
});

以上是关于如何在提交按钮上多次单击时仅在数据库中插入一条记录的主要内容,如果未能解决你的问题,请参考以下文章

具有空存储的 ExtJS 网格,在添加/插入时仅显示添加的最新记录 [关闭]

PHP Mysql仅在提交后插入

Rails:2单击一个提交按钮在两个数据库中插入记录(将一个控制器的记录保存在另一个控制器中)

如何确保 MS Access 中的有界表单和子表单仅在单击按钮后提交到数据库?

防止多次点击直到记录被删除

如何在handsontable上过滤时仅在下拉菜单上显示不包含HTML内容的文本?