'how to disable button during ajax request
so I have a razor form and I want to disable a button during ajax request. Also I want to be able to send only one request to controller - (disable any flood attempt)
This is my html:
<div class="row">
<div class="col-md-8 col-md-offset-2">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "contactForm" }))
{
<div class="clearfix">
<div class="cf-left-col">
<div class="form-group required">
@Html.TextBoxFor(m => m.CheckInCheckOutDate, new { @class = "form-control input-md round", @required = "required", @autocomplete = "off", @id = "input-id", @placeholder = Resources.Resources.CheckInCheckOutPlaceholderKey })
<div>
@Html.ValidationMessageFor(m => m.CheckInCheckOutDate, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control input-md round", @required = "required", @placeholder = "Name" })
<div>
@Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.MobilePhone, new { @class = "form-control input-md round mobile", @required = "required", @placeholder = "Mobile phone" })
<div>
@Html.ValidationMessageFor(m => m.MobilePhone, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.EMail, new { @class = "form-control input-md round", @required = "required", @placeholder = "E-Mail" })
<div>
@Html.ValidationMessageFor(m => m.EMail, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.AdultsNumber, new { @class = "form-control input-md round person", @required = "required", @placeholder = "Guests" })
<div>
@Html.ValidationMessageFor(m => m.AdultsNumber, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.ChildrenNumber, new { @class = "form-control input-md round person", @placeholder = "Children" })
</div>
</div>
<div class="cf-right-col">
<div class="form-group required">
@Html.TextAreaFor(m => m.MessageBody, new { @class = "form-control input-md round", @rows = 10, @placeholder = "Message" })
<div>
@Html.ValidationMessageFor(m => m.MessageBody, null, new { @class = "text-danger" })
</div>
</div>
@*localhost*@
@*<div class="g-recaptcha" data-sitekey="6LdKaUAUAAAAAMi2MkpRBxJYnmqWJmnJmF22RsRF1"></div>*@
</div>
</div>
@Html.HiddenFor(m => m.MobilePrefixCountry)
@Html.HiddenFor(m => m.ApartmentName)
@Html.HiddenFor(m => m.NumberOfNights)
<br />
<div class="align-left pt-10">
<div class="form-group">
<input id="submitBtn" class="btn btn-default" type="submit" value="Send Message" />
</div>
</div>
<div id="successAlert" class="alert alert-success collapse">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> You have successfully send email. Our staff will respond in shortest amount of time.
</div>
<div id="errorAlert" class="alert alert-danger collapse">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Sending failed!</strong> Please fill all neccessery fields and try again.
</div>
}
</div>
</div>
I have this js:
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
//$.ajax({
// type: "POST",
// async:false,
// url: "/Home/SendEmail",
// data: form.serialize(), // serializes the form's elements.
// success: function (data) {
// if (data == "True") {
// $('#successAlert').show('fade')
// .delay(9000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// else if (data == "False") {
// $('#errorAlert').show('fade')
// .delay(6000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// }
//});
setTimeout(function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}, 3000);
e.preventDefault();
});
This works just fine, but when I uncomment ajax section, I am not able to see transition of toggling button disable/enable. I've put async:false.
UPDATED (still not working):
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
$.ajax({
type: "POST",
async: false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
},
error: function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}
});
e.preventDefault();
});
Solution 1:[1]
Change async: false to async: true and enable button again in some callback of ajax request. As long as you keep async: false you are blocking main thread and changes for GUI elements will not take effect till function returns.
async from false to true is the only change to @adaptable.services' code.
Solution 2:[2]
Place your button enable code inside the ajax success. This will enable the disabled button after ajax completion.
Solution 3:[3]
first make your <input type="submit"> to <button type="submit">Send Message</button>
and then try this..
<script>
$("#contactForm").submit(function (e) {
e.preventDefault();
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").html('Sending...');
$.ajax({
type: "POST",
async:false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
},
error: function () {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
}
});
});
</script>
Solution 4:[4]
$('#button').attr("disabled", true);
$.ajax({
url: url,
data: data,
type: 'post',
dataType: 'json',
cache: false,
async: true,
complete: function(response){
$('#button').attr("disabled", false);
},
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | tilakmukul |
| Solution 2 | |
| Solution 3 | adaptable.services |
| Solution 4 | Guru |