[英]How to disable a submit button when AJAX request is in progress and enable it after receiving success AJAX response?
我遵循HTML代碼:
<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">
<button type="submit" class="btn btn-primary" name="search" id="search">Search Rebates</button>
</div>
</div>
</div>
AJAX jQuery代碼如下:
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);
}
});
}
我想通過改變select控件的值(制造商選擇的選擇控件)來調用AJAX函數時禁用提交按鈕,並且應該禁用它直到收到AJAX成功響應。 當AJAX成功響應將收到用戶應該可以點擊提交按鈕。 怎么做到這一點? 提前致謝。
禁用
$("#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請求,這對於整個頁面都是全局的。
$(document).ajaxStart(function() {
$("#search").prop('disabled', true);
}).ajaxStop(function() {
$("#search").prop('disabled', false);
});
我會在ajax調用之前禁用該按鈕並在成功回調時再次啟用它,如下所示做某事的任何問題?
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');
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.