javascript - Data loading text on button - Stack Overflow

admin2025-04-21 1

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 PapT 6235 gold badges15 silver badges33 bronze badges

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

Add a ment |

2 Answers 2

Sorted by: Reset to default 0

Try 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");
  }
});

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745216178a290862.html

javascriptData loading text on buttonStack Overflow

最新回复(0)