Daten laden von text-auf-Taste

Ich habe ähnliche Fragen hier, aber keiner von Ihnen schien mein problem zu lösen.

Ich versuche das hinzufügen von Daten-laden-text zu meinem submit-button, aber ohne Glück so weit.

Ich bin mit Bootstrap 4!

Hier ist mein HTML:

<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>

Dies war die Letzte jquery code habe ich versucht:

$(function() {
$(".btn").click(function(){
    $(this).submit('loading').delay(1000).queue(function() {
        //$(this).button('reset');
    });
});
});

Dank

  • wenn der button ist vom Typ submit und ist in das Formular ein, sobald Sie es anklicken, das Formular bereits übermittelt. Müssten Sie nur ändern Sie den inneren text mit .text('text')
  • Dieses feature wurde entfernt, in der Bootstrap-4.
  • Drop-in-Lösung veröffentlicht, um die gleiche Frage in stackoverflow.com/questions/48240011/...
InformationsquelleAutor PapT | 2016-12-21
  1. 0

    Versuchen.

    HTML:

    <!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>

    Im Falle des Submit-button die einzige Möglichkeit ist, binden Sie eine benutzerdefinierte Funktion auf klicken Sie auf und ändern Sie das action Attribut-event-handler.

    • Wenn ich chanege der Typ-Taste kann ich den text laden, aber dann mein Formular nicht gesendet.
    • Im Falle des Submit-button die einzige Möglichkeit ist, binden Sie eine benutzerdefinierte Funktion auf klicken Sie auf und ändern Sie das action Attribut-event-handler.
    • Noch nicht senden
    • Sorry, es ist das senden der Nachricht jetzt. Aber nachdem die Nachricht gesendet, der "Laden ..." - text bleibt auf der Taste.
    • Sie müssen das ändern manuell auf den Empfang der Antwort $("#submit").text("Nachricht Senden!");
    InformationsquelleAutor Nitheesh
  2. 0

    Ich denke, das ist der einfachste Weg, um das Ergebnis zu erhalten, benötigen Sie:

    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");
  }
});
    InformationsquelleAutor e-retailer
Schreibe einen Kommentar