Geek Answers Handbook

How to disable the submit button when executing an AJAX request and enable it after receiving an AJAX response?

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

The jQuery AJAX 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);
    }
  });
}

I want the submit button to turn off when the AJAX function call is made by changing the value of the select control (select the control to select the manufacturer), and it should be disabled until an AJAX response is received. When AJAX receives a response to success, the user must click the submit button. How to achieve this? Thanks in advance.

+4
source share
3 answers

to disconnect

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

to enable

 $("#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
    }
  });
}
+14

- , . ajax.

$(document).ajaxStart(function() {
   $("#search").prop('disabled', true);
}).ajaxStop(function() {
   $("#search").prop('disabled', false);
});
+4

I would disable the button before calling ajax and re-enable it on a successful callback, any problem is that you are doing something like below?

 function GetProductByManufacturerID(value) { 
  $('#search').addAttr('disabled');
  $.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);
    $('#search').removeAttr('disabled');
     }
   });
   }
0
source

More articles:


All Articles