[英]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.