如何在AJAX请求进行时禁用提交按钮，并在收到成功的AJAX响应后启用它? [英] How to disable a submit button when AJAX request is in progress and enable it after receiving success AJAX response?

问题描述

我正在遵循HTML代码:

I've following HTML code:

<form action="view_rebate_master.php" method="post">
  <div class="form-group">
    <label for="company_name" class="col-lg-12">Manufacturer</label>
    <div class="col-lg-12">
      <select id="company_id" class="form-control" onchange="GetProductByManufacturerID(this.value)" name="company_id">
        <option selected="selected" value="">All Manufacturers</option>
        <option value="40">Test</option>
        <option value="42">RK</option>
        <option value="49">Blue Nun</option>
        <option value="58">Unique Imports</option>
        <option value="59">Pernod Ricard</option>
        <option value="77">Smoking Loon</option>
        <option value="78">Beringer</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="form-group">
      <label for="product_id" class="col-lg-12">Product Name</label>
      <div class="col-lg-12">
        <select id="product_id" class="form-control" name="product_id">
          <option selected="selected" value="">All Products</option>
          <option value="12">Riesling</option>
          <option value="24">Superio Vodka</option>
          <option value="32">Heineken</option>
          <option value="33">Strong Bow</option>
          <option value="34">Grocery</option>
          <option value="35">Ruler</option>
          <option value="36">Glass</option>
          <option value="37">Brown Bread</option>
          <option value="38">White Bread</option>
          <option value="55">Cabernet Sauvignon</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-lg-12">   
    <div class="col-xs-5">
      <div class="form-group">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary" name="search" id="search">Search Rebates</button>
    </div>
  </div>
</div>

AJAX jQuery代码如下:

The AJAX jQuery code is as follows:

function GetProductByManufacturerID(value) { 
  $.ajax({
    type: "POST",
    url: "add_rebate_by_quat_volume.php",
    data: { manufacturer_id: value, op:"" },
    beforeSend: function() { 
      $("#product_id").html('<option> Loading ...</option>');
    },
    success:function(data){ 
      $("#product_id").html('');
      $("#product_id").append(data);
    }
  });
}

我想通过更改选择控件(用于制造商选择的选择控件)的值来调用AJAX函数时使提交按钮禁用，并且应该禁用它，直到收到AJAX成功响应为止.当收到AJAX成功响应时，用户应该能够单击提交"按钮.如何实现呢?预先感谢.

I want to make the submit button disable when the AJAX function call is made by changing the value of select control(select control for Manufacturer selection) and it should be disabled till the AJAX success response is received. When AJAX success response will receive the user should be able to click on the submit button. How to achieve this? Thanks in advance.

推荐答案

用于禁用

 $("#search").prop('disabled', true);

启用

 $("#search").prop('disabled', false);

就像下面的函数一样

function GetProductByManufacturerID(value) { 
  $.ajax({
    type: "POST",
    url: "add_rebate_by_quat_volume.php",
    data: { manufacturer_id: value, op:"" },
    beforeSend: function() { 
      $("#product_id").html('<option> Loading ...</option>');
      $("#search").prop('disabled', true); // disable button
    },
    success:function(data){ 
      $("#product_id").html('');
      $("#product_id").append(data);
      $("#search").prop('disabled', false); // enable button
    }
  });
}

这篇关于如何在AJAX请求进行时禁用提交按钮，并在收到成功的AJAX响应后启用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！