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

我正在使用CodeIgniter。我有一个表单，字段是

姓名、电子邮件、手机号码、消息

我能够使用AJAX提交数据库中的数据。AJAX没有问题

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

有没有办法阻止这个问题。像一次点击提交按钮，直到数据库中的数据提交

查看

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

$（“#表单”）。验证({
规则：{
姓名：{
要求：正确，
最小长度：3，
信一：真的
},
美孚利诺：{
要求：正确，
最小长度：10，
最大长度：10，
数字：对
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
要求：正确，
最小长度：10
}
},
submitHandler:函数（表单）{
//表单提交（）；
$.ajax({
url:“”，
类型：“POST”，
数据：$（'#form'）。序列化（），
成功：功能（数据）{
$（“#弹出_验证-1”）.hide（）；
$（“#弹出#u success-1”）.show（）；
},
})；//AJAX获取Jquery语句
}
});

控制器

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
  }

}

公共功能联系人（）{
$this->form_validation->set_error_分隔符（“”，）；
$this->form_validation->set_rules（'name'、'name'、'trim | required | min_length[3]）；
$this->form_validation->set_规则（'mobileno'，'Mobile no'，'trim | required | regex_match[/^[0-9]{10}$/]）；
$this->form_validation->set_规则（'email'、'email'、'required'；valid_email'）；
$this->form_validation->set_规则（'message'、'message'、'required'）；
如果（$this->form\u validation->run（）==FALSE）{
//$this->index（）；
}否则{
$form_data=数组(
'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\u data）；
echo json_encode（数组（“数据”=>$success））；//返回到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>

var isReqInprogress=false；
$（“#表格”）。验证({
规则：{
姓名：{
要求：正确，
最小长度：3，
信一：真的
},
美孚利诺：{
要求：正确，
最小长度：10，
最大长度：10，
数字：对
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
要求：正确，
最小长度：10
}
},
submitHandler:函数（表单）{
//表单提交（）；
如果（正在进行）{
返回；
}
isReqInprogress=true；
$.ajax({
url:“”，
类型：“POST”，
数据：$（'#form'）。序列化（），
成功：功能（数据）{
$（“#弹出_验证-1”）.hide（）；
$（“#弹出#u success-1”）.show（）；
isReqInprogress=false；
},
})；//AJAX获取Jquery语句
}
});

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

$.ajax({
类型：“POST”，
url:“”，
数据：$（'#form'）。序列化（），
beforeSend:function（）{
$（'#form'）.find（“输入[type='submit']）.prop（'disabled'，true）；//禁用按钮
},
成功：函数（数据）{
$（“#弹出_验证-1”）.hide（）；
$（“#弹出#u success-1”）.show（）；
$（'#form'）.find（“输入[type='submit']）.prop（'disabled'，false）；//启用按钮
}
});

解决方案2:如果您不想禁用submit按钮，但防止多次使用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
  }
});

$（“#表单”）。验证({
var iscurrentqinprogress=false；
...
...
submitHandler:函数（表单）{
//表单提交（）；
如果（iscurrentr）正在进行{
返回；
}
iscurrentqinprogress=true；
$.ajax({
url:“”，
类型：“POST”，
数据：$（'#form'）。序列化（），
成功：功能（数据）{
$（“#弹出_验证-1”）.hide（）；
$（“#弹出#u success-1”）.show（）；
iscurrentqinprogress=false；
},
})；//AJAX获取Jquery语句
}
});

有两种方法。1.第一次单击2后禁用提交按钮。首先检查表中的现有数据（如果存在），然后退出（如果不插入）@我认为第一种选择是正确的。第二个选项对我不好，因为一段时间后，如果用户想要插入相同的记录，那么它将不接受，但我需要它。我必须使用代码//$（this.find）（“input[type='submit']”）.prop（'disabled'，true）；但是我在哪里使用这个代码可以帮助我吗？我尝试了你的代码，但没有工作。我的意思是禁用类不使用提交按钮请尝试更新的解决方案，或尝试为提交按钮提供id（建议提交），然后使用

$（'submit_btn'）。prop（'disabled'，false/true）给我时间检查您的代码是否正常工作。没有ajax你也能帮我吗？