Deaktivieren Sie die Schaltfläche "Senden" beim Senden des Formulars

Ich habe diesen Code geschrieben, um die Senden-Schaltflächen auf meiner Website nach dem Klicken zu deaktivieren:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

Leider wird das Formular nicht gesendet. Wie kann ich das beheben?

BEARBEITEN Ich möchte das Senden binden, nicht das Formular :)

Mach es onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Was passiert, ist, dass Sie die Schaltfläche vollständig deaktivieren, bevor sie tatsächlich das Übermittlungsereignis auslöst.

Sie sollten wahrscheinlich auch darüber nachdenken, Ihre Elemente mit IDs oder KLASSEN zu benennen, damit Sie nicht alle Eingaben vom Typ "Senden" auf der Seite auswählen.

Demonstration: http://jsfiddle.net/userdude/2hgnZ/

(Hinweis: Ich verwende preventDefault()und return falsedaher wird das Formular im Beispiel nicht tatsächlich gesendet. Lassen Sie dies bei Ihrer Verwendung weg.)

Insbesondere wenn jemand vor einem Problem steht in Chrome:

Um dies zu beheben, müssen Sie das onSubmitTag im <form>Element verwenden, um die Senden-Schaltfläche festzulegen disabled. Dadurch kann Chrome die Schaltfläche sofort nach dem Drücken deaktivieren und die Formularübermittlung wird weiterhin fortgesetzt ...

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Deaktivierte Steuerelemente senden ihre Werte nicht, was nicht hilfreich ist, um festzustellen, ob der Benutzer auf Speichern oder Löschen geklickt hat.

Also speichere ich den Schaltflächenwert in einem versteckten, der gesendet wird. Der Name des Versteckten entspricht dem Namen der Schaltfläche. Ich rufe alle meine Tasten mit dem Namen an button.

Z.B <button type="submit" name="button" value="save">Save</button>

Aufgrund dessen habe ich hier gefunden . Speichern Sie einfach die angeklickte Schaltfläche in einer Variablen.

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Hier ist meine IsNullFunktion. Verwenden oder ersetzen Sie IsNull oder undefined usw. durch Ihre eigene Version.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Dies sollte in Ihrer App erledigt werden.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Einfache und effektive Lösung ist

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Quelle: hier

Ein einfacherer Weg. Ich habe es versucht und es hat gut funktioniert für mich:

$(':input[type=submit]').prop('disabled', true);

Ihr Code funktioniert tatsächlich mit FF, er funktioniert nicht mit Chrome.

Dies funktioniert auf FF und Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

So deaktivieren Sie die Schaltfläche "Senden"

Rufen Sie einfach eine Funktion für das Ereignis onclick auf und ... geben Sie true zum Senden und false zum Deaktivieren von submit zurück. ODER rufen Sie eine Funktion in window.onload auf wie:

window.onload = init();

und in init () mache so etwas:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 

Folgendes hat bei mir funktioniert:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

Dadurch wird das Senden-Ereignis abgebrochen, wenn der Benutzer mehrmals versucht, das Formular zu senden (durch Klicken auf eine Senden-Schaltfläche, Drücken der Eingabetaste usw.).

Ich habe blockUI verwendet, um Browser-Inkompatibilitäten bei deaktivierten oder versteckten Schaltflächen zu vermeiden.

http://malsup.com/jquery/block/#element

Dann haben meine Schaltflächen einen Klassen-Autobutton:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });   

Dann ist eine Form so:

<form>
....
<button class="autobutton">Submit</button>   
</form>

Schaltflächencode

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

Schaltfläche deaktivieren

if(When You Disable the button this Case){
 $(':input[type="submit"]').prop('disabled', true); 
}else{
 $(':input[type="submit"]').prop('disabled', false); 
}

Hinweis: Ihr Fall ist möglicherweise mehrfach. Diesmal ist möglicherweise mehr Bedingung erforderlich

Möchten Sie auch den Wert der Schaltfläche angeben und das Senden von Doppelformularen verhindern?

Wenn Sie eine Schaltfläche vom Typ "Senden" verwenden und auch den Wert der Schaltfläche senden möchten. Dies ist nicht der Fall, wenn die Schaltfläche deaktiviert ist. Sie können ein Formulardatenattribut festlegen und anschließend testen.

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });