I've checked similar questions here, but none of them seemed to solve my problem.
I'm trying to add data-loading-text to my submit button, but with no luck so far.
I'm using Bootstrap 4!
Here is my HTML:
<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
This was the last jquery code I tried:
$(function() {
$(".btn").click(function(){
$(this).submit('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
Thanks
I've checked similar questions here, but none of them seemed to solve my problem.
I'm trying to add data-loading-text to my submit button, but with no luck so far.
I'm using Bootstrap 4!
Here is my HTML:
<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
This was the last jquery code I tried:
$(function() {
$(".btn").click(function(){
$(this).submit('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
Thanks
Share Improve this question edited Dec 21, 2016 at 14:03 Kevin Kloet 1,0861 gold badge11 silver badges21 bronze badges asked Dec 21, 2016 at 13:47 PapTPapT 6235 gold badges15 silver badges33 bronze badges 3- if the button is type submit and is inside the form, once you click it the form already submits. You would only need to change the inner text with .text('text') – yBrodsky Commented Dec 21, 2016 at 13:50
- This feature has been removed in Bootstrap 4. – Andres SK Commented May 9, 2018 at 22:36
- Drop-in solution posted to the same question at stackoverflow./questions/48240011/… – Mavelo Commented Oct 26, 2018 at 13:04
2 Answers
Reset to default 0Try this.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
function MyCustomFunction(){
$("#submit").text("Loading...");
$(this).submit('loading').delay(1000).queue(function () {
// $(this).button('reset');
});
}
</script>
</head>
<body>
<button type="submit" onclick="MyCustomFunction()" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
</body>
</html>In case of Submit button the only possible way is to bind a custom function on click and change the action attribute to event handler.
I think this is the most easy way to get the result you need:
HTML:
<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Your order is being processed...">Order now</button>
JAVASCRIPT / JQUERY:
$(".btn").on('click', function () {
var dataLoadingText = $(this).attr("data-loading-text");
if (typeof dataLoadingText !== typeof undefined && dataLoadingText !== false) {
console.log(dataLoadingText);
$(this).text(dataLoadingText).addClass("disabled");
}
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745216156a4617032.html
评论列表（0条）