如何避免在双击按钮上插入多个数据答案

【问题标题】：How avoid multiple data insert on double clicking button如何避免在双击按钮上插入多个数据
【发布时间】：2016-06-01 20:26:27
【问题描述】：

我已经使用 ajax 调用完成了数据插入。单击提交按钮时，它将重定向到查看页面。但问题是。当连续单击提交按钮时，多个条目进入数据库。如何防止这种情况。我在下面给出我的代码。请帮助。

控制器

 public function addmerchant() {
        $this->load->helper(array('form', 'url'));
        $this->load->helper('file');

         $ip = $_SERVER['REMOTE_ADDR'];
         $config['upload_path'] = 'assets/images/merchantquote';
        $config['allowed_types'] ='gif|jpg|jpeg|png|pdf|doc|docx|txt';
        $config['max_size'] = '1000';
        $config['max_width'] = '2024';
        $config['max_height'] = '1768';
        $config['width'] = 75;
        $config['height'] = 50;
         if (isset($_FILES['txtattachments']['name'])) {
            $filename = "-" . $_FILES['txtattachments']['name'];
            $config['file_name'] = substr(md5(time()), 0, 28) . $filename;
        }
        $config['overwrite'] = TRUE;
        $config['remove_spaces'] = TRUE;
        $field_name = "txtattachments";
        $this->load->library('upload', $config);
         if (!$this->upload->do_upload('txtattachments')) {
                //no file uploaded or failed upload
                $error = array('error' => $this->upload->display_errors());
            } else {
                $dat6 = array('upload_data' => $this->upload->data());
                $this->resize($dat6['upload_data']['full_path'], $dat6['upload_data']['file_name']);
            }
            if (empty($dat6['upload_data']['file_name'])) {
                $merimage = '';
            } else {
                $merimage = $dat6['upload_data']['file_name'];
            }
        $data7 = array(
            'qub_merchantid' => $this->input->post('merchant'),
            'qub_customerid' => $this->input->post('customer'),
            'qub_shipcontactname' => $this->input->post('txtShipContactName'),
            'qub_shipaddress' => $this->input->post('txtAddress'),  
            'qub_shiplocation'=>$this->input->post('txtLocation'),  
            'qub_telephone'=>$this->input->post('txtTelephone'), 
            'qub_mobile'=>$this->input->post('txtMobile'), 
            'qub_email'=>$this->input->post('txtEmail'), 
            'qub_payterms'=>$this->input->post('txtPayterms'),
            'qub_paymode'=>$this->input->post('txtPaymode'),
            'qub_deliveryperiod'=>$this->input->post('txtDelivery'),
            'qub_incoterms'=>$this->input->post('txtIncoterms'),
            'qub_attachment'=>$merimage,
            'qub_expiry'=>$this->input->post('txtExpiry'),
            'qub_permission'=>0,
            'qub_dated'=>time(),
            'qub_ipadd'=>$ip
        );

        $inserted_id = $this->quotemerchant_model->forminsert($data7);
        $unitprice = $this->input->post('txtUnitprice');
        $quantity = $this->input->post('txtQuantity');
        $discount = $this->input->post('txtDiscount');
        $totalprice = $quantity * $unitprice;
        $effective = $totalprice - $discount;
        $vat = $this->input->post('txtVAT');
        $gst = $this->input->post('txtGST');
        $service = $this->input->post('txtServicetax');
        $octroi = $this->input->post('txtOctroi');
        $excise = $this->input->post('txtExcise');
        $shipping = $this->input->post('txtShipping');
        $other = $this->input->post('txtOthertaxcharges');
        $dats['gstamount'] = ($effective * $gst) / 100;
        $dats['servicetaxamt'] = ($effective * $service) / 100;
        $dats['octroiamt'] = ($effective * $octroi) / 100;
        $dats['exciseamt'] = ($effective*$excise) / 100;

        $dats['vatamt'] = ($effective + $dats['exciseamt']) * $vat / 100;
        $dats['netamount'] = $effective + $dats['gstamount'] + $dats['octroiamt'] + $dats['servicetaxamt'] + $dats['exciseamt'] + $other + $dats['vatamt']+ $shipping;
        $sellingprice= $dats['netamount'];
                 $data8=array(
            'qud_qubid' => $inserted_id,
            'qud_productid' => $this->input->post('sbProduct'),
            'qud_unit' => $this->input->post('sbUnit'),
            'qud_quantity' => $this->input->post('txtQuantity'),  
            'qud_unitprice'=>$this->input->post('txtUnitprice'),  
            'qud_vat'=>$this->input->post('txtVAT'), 
            'qud_gst'=>$this->input->post('txtGST'), 
            'qud_servicetax'=>$this->input->post('txtServicetax'), 
            'qud_octroi'=>$this->input->post('txtOctroi'),
            'qud_excise'=>$this->input->post('txtExcise'),
            'qud_othertaxcharges'=>$this->input->post('txtOthertaxcharges'),
            'qud_shipping'=>$this->input->post('txtShipping'),
            'qud_discount'=>$this->input->post('txtDiscount'),
            'qud_totalprice'=>$totalprice,
            'qud_sellingprice'=>$sellingprice,
            'qud_requirementid'=>$this->input->post('txtRequirement'),
            'qud_rfqid'=>$this->input->post('txtRFQid'),
            'qud_enduser'=>$this->input->post('txtEnduser'),
            'qud_merchantid'=>$this->input->post('merchant'),
            'qud_customerid'=>$this->input->post('customer'), 
            'qud_dated'=>time(),
            'qud_ipadd'=>$ip,
        );

                $admid=  $this->session->userdata('moderId');

           $revicedata=array(
            'rev_processtype'=>'1',
            'rev_actionlevel'=>'new',
            'rev_processdataid' => $inserted_id,
            'rev_admtype' =>2,  
            'rev_admid'=>$admid,  
             'rev_dated'=>time(),
            'rev_ipadd'=>$ip,
            );
         //  echo '<pre>'; print_r($this->session->all_userdata());exit;
           $reviceinsert=$this->quotemerchant_model->insertreviceaction($revicedata); 




          $detail=$this->quotemerchant_model->forminsertdetail($data8);
         $response=array('id'=>$inserted_id,'message'=>"inserted successfully"); 
         echo json_encode($response); 
         die();

    }

查看

   <script type="text/javascript">

    $('#merchantsubmit').click(function () {

 var formData = new FormData($('#myform')[0]);
        $.ajax({
            url: "<?php echo base_url() ?>moderator/QuoteMerchant/addmerchant",
            type: 'POST',
           data: formData,
           dataType:"Json", 
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
            success: function(data) {
                var last_inserted_id = data.id;
                window.location.href ="<?php  echo base_url() ?>moderator/QuoteMerchant/viewmerchant/"+last_inserted_id;
                // window.location.href ="<?php //echo base_url()             ?>moderator/RFQ/viewrfq/"+  form_data.reqid;
//      alert('added Successfully');
            }
        });

        return false;
    });



</script>

型号

public function forminsert($data7)
{
     $this->db->insert('jil_quotemjbrief',$data7);
     return $this->db->insert_id();
}
public function forminsertdetail($data8) {
     $this->db->insert('jil_quotemjdetail',$data8);
     return $this->db->insert_id();
}

【问题讨论】：

您可以在ajax成功或重置表单后重新加载页面
它是如何工作的？你能解释一下吗？
数据插入成功后显示成功信息或任何其他内容
我这样做了，成功后重定向到另一个页面。但是 ajax 有点慢。我们有时间双击按钮。所以更多的电话消失了
发送ajax显示加载图片之前

标签： php ajax codeigniter codeigniter-2 codeigniter-3

【解决方案1】：

使用此代码

在视图中

 <style>
  .loading {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff url("<?php echo base_url();?>images/loading.gif") no-repeat center center;
  opacity: .2;
  z-index: 20140628;
  height:1100px;
}

放 div

<div class="loading"></div>

和 ajax

    <script>
        function getValue(val) {
            //alert(val);
$('.loading').show();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url() ?>moderator/QuoteMerchant/createquotemerchant",
                data: {from: "ajax", reqid: val},
                success: function (data) {
                    $("#content").html(data);
                }
            });
        }
    </script>

【讨论】：

海友，我确实喜欢这个，location.reload();成功后，这行得通。但在控制台中显示类似错误。您的代码也可以。
现在我编辑我的答案你只需使用任何加载 gif 图像
但是当我们持续点击这个按钮时，会插入多个条目。如何避免？
先点击阴影进入屏幕，然后用户不再点击
这个加载图片自动来了？或者我们必须把它放在一个文件夹中？

【解决方案2】：

用户：

<script type="text/javascript">

$('#merchantsubmit').click(function () {
    var ajaxCall = true;

    if(ajaxCall) {

        ajaxCall = false;
        var formData = new FormData($('#myform')[0]);
        $.ajax({
            url: "<?php echo base_url() ?>moderator/QuoteMerchant/addmerchant",
            type: 'POST',
            data: formData,
            dataType:"Json", 
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
            success: function(data) {
                var last_inserted_id = data.id;
                window.location.href ="<?php  echo base_url() ?>moderator/QuoteMerchant/viewmerchant/"+last_inserted_id;
            }
        });
    }

});

【讨论】：

我更新了我的脚本。请检查。每次单击按钮时，函数都会执行
现在就使用这个脚本
你看到我对你脚本的更新了吗？
是的，我看到了你的更新，但你也可以这样使用。
让我们continue this discussion in chat。

【解决方案3】：

请试试这个

<script>
    function getValue(val) {
        var $form = $('#formId');
        $form.find('submit').attr('disabled', true); // Disable further button click
        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>moderator/QuoteMerchant/createquotemerchant",
            data: {from: "ajax", reqid: val},
            success: function (data) {
                $("#content").html(data);
            },
            complete: function() {
            $form.find('submit').removeAttr('disabled'); // On complete enable the button
            }

        });
    }
</script>

【讨论】：

【解决方案4】：

尝试这样做以避免在 jquery 中出现多次提交问题。

<script type="text/javascript">
    var isSubmitting = false;
    $('#merchantsubmit').click(function () {
        if(isSubmitting) {
            return;
        }
        isSubmitting = true;
        var formData = new FormData($('#myform')[0]);
        $.ajax({
            url: "<?php echo base_url() ?>moderator/QuoteMerchant/addmerchant",
            type: 'POST',
            data: formData,
            dataType: "Json",
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                isSubmitting = false;
                var last_inserted_id = data.id;
                window.location.href = "<?php echo base_url() ?>moderator/QuoteMerchant/viewmerchant/" + last_inserted_id;
                // window.location.href ="<?php //echo base_url()              ?>moderator/RFQ/viewrfq/"+  form_data.reqid;
//      alert('added Successfully');
            }
        });

        return false;
    });



</script>

【讨论】：

【解决方案5】：

我在第一次点击时禁用了按钮。所以问题解决了

【讨论】：

【解决方案6】：

 $('#merchantsubmit').click(function(e) {
    e.preventDefault(); //it's prevent jquery
    $.ajax({
        //your configuration is here

        success: function(data) {
            //make disable your buton
            $('#your-button-id').text('Save'); //change button text
            $('#your-button-id').attr('disabled', false); //set button enable
        }
    });
});

你需要在 jquery 中给出阻止的目的，只需要执行一个事件，因为上面的另一个答案是给出禁用按钮 jquery，希望这对你有所帮助

【讨论】：