Button value to be changed back to original value on timeout (form double submit)
Just change this to $("#submit_btn") and it works:
$(function() {
$("#submit_btn").click(function() {
$("#submit_btn").attr("disabled", "disabled");
$("#submit_btn").val("Processing...");
setTimeout(function() {
$("#submit_btn").val("Submit");
$("#submit_btn").removeAttr("disabled");
}, 5000);
});
});<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />The issue was that your functions were interfering with this. You could have done self = this which would have had the same effect:
$(function() {
$("#submit_btn").click(function() {
var self = this;
$(self).attr("disabled", "disabled");
$(self).val("Processing...");
setTimeout(function() {
$(self).val("Submit");
$(self).removeAttr("disabled");
}, 5000);
});
});<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />Or you could have used event.target:
$(function() {
$("#submit_btn").click(function(event) {
$(event.target).attr("disabled", "disabled");
$(event.target).val("Processing...");
setTimeout(function() {
$(event.target).val("Submit");
$(event.target).removeAttr("disabled");
}, 5000);
});
});<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" /> $(function() {
$("#submit_btn").click(function(event) {
$('button').button({ loadingText: 'Processing..' });
$('#submit_btn').button('loading');
//after submit stuff put below line to reset;
$('#submit_btn').button('reset');
});
});
above code work best when you used html button in place of input type button Note-- To Show Spin Icon inside Button put font-awesome or any other icon in place of Processing.. or both in loadingText object
you just need to replace that line with the following code: $("#submit_btn").val("Submit");
you should use val function to change the text of the button.