Data loading text on button

Question

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

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, Dec 21 '16 at 13:50
Drop-in solution posted to the same question at https://stackoverflow.com/questions/48240011/show-loading-using-jquery-in-bootstrap-4-with-data-loading-text/#answer-53009288 — Mavelo, Oct 26 '18 at 13:04

Nitheesh · Accepted Answer · 2016-12-21T14:05:52.383

0

Try this.

<!DOCTYPE html>
<html>

<head>
    <style></style>
    <script src="https://ajax.googleapis.com/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.

edited Dec 21 '16 at 14:05

answered Dec 21 '16 at 13:54

Nitheesh

19,238
3
22
49

If I chanege the type to button i can see the loading text, but then my form isn't sent. – PapT Dec 21 '16 at 14:00
@PapT 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. – Nitheesh Dec 21 '16 at 14:06
Still not sending – PapT Dec 21 '16 at 14:13
Sorry, it's sending the message now. But after the message sent the "Loading ..." text stays on the button. – PapT Dec 21 '16 at 14:38
You need to change that manually on receiving the response by $("#submit").text("Submit message!"); – Nitheesh Dec 21 '16 at 14:39

score 0 · Answer 2 · answered Aug 03 '17 at 13:57

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

Data loading text on button

2 Answers2

Linked