webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie die Schaltfläche nach dem Senden mit jQuery

Ich weiß, es gibt viele Fragen dazu, aber ich habe mehrere Lösungen ausprobiert und nichts funktioniert.

In meiner Django-App habe ich ein Formular:

<form method='post'>
    <button type='submit'>Send</button>
</form>

Ich möchte die Schaltfläche nicht deaktivieren, sobald der Benutzer das Formular gesendet hat. Mit anderen Fragen habe ich verschiedene Dinge ausprobiert:

<button type='submit' onclick="this.disabled=true">Send</button>

Wenn ich auf klicke, ist die Schaltfläche deaktiviert ... aber das Formular wird nicht gesendet. Bei jedem Versuch hatte ich das gleiche Problem: Entweder die Schaltfläche ist deaktiviert oder das Formular wird gesendet. Ich kann nicht beides finden ...

Ich benutze Chrome. Hast du eine Idee, warum ich dieses Problem habe? Danke für deine Hilfe.

32
Juliette Dupuis

Versuche dies:

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});
74
Johann

Ich mag das, ich muss den DOM nicht durchlaufen Setzen Sie die Funktion auf eine setTimeout-Funktion. Dies ermöglicht das Senden und Nach-Deaktivieren der Schaltfläche, auch wenn setTimeout 0 ist

$(document).ready(function () {
$("#btnSubmit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $("#btnSubmit").prop('disabled', true);
}
});
13
Crying Freeman

Sie können es nach dem Ereignis submit des übergeordneten Formulars deaktivieren:

$("form").on("submit", function () {
    $(this).find(":submit").prop("disabled", true);
});

Stellen Sie sicher, dass Sie diesen Code erst ausführen, nachdem die Variable HTMLFormElement geladen wurde. Andernfalls wird nichts daran gebunden. Um sicherzustellen, dass die Bindung erfolgt, lösen Sie diese aus einem document-ready-Block aus:

// When the document is ready, call setup
$(document).ready(setup);

function setup () {
    $("form").on("submit", function () {
        $(this).find(":submit").prop("disabled", true);
    });
}
5
Sampson

So etwas könnte funktionieren.

<button id="btnSubmit" type='submit'> Send </button>

<script>
     $("#btnSubmit").on("click", function(e){
          e.PreventDefault();
          $(this).closest("form")[0].submit();
          $(this).prop('disabled',true)
     });
</script>
3
Gaz Winter

Versuchen Sie es so

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
2
Adem Öztaş

Wie wäre es damit?

onclick="this.style.visibility='hidden';"

Ich würde sagen, anstatt behindert zu sein, es zu verstecken.

Wenn Sie mit disabled gehen wollen

onclick="this.style.disabled='true';"
1
Fahim Parkar

meine Variante, Deaktivierungstaste, keine direkte Deaktivierung, sondern nur versteckte Anzeige:

<input type="submit" name="namebutton" value="Nahrát obrázek"  onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
1
geniv

Wenn Sie nicht möchten, dass ein Element doppelt angeklickt wird, verwenden Sie .one ().

<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
 });
});

.ein()

0

Sie können so etwas tun. Es ist gut mit mir zu arbeiten.

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

Doppelklicken Sie auf Ihre Schaltfläche. Dieser Code wird ausgeführt

0
Đoàn Anh Tú

Ich mag das besser:

<script>
    var submit = false;
    $('form').submit(function () {
        if (submit) { return false; }
        else { submit = true;}
    });
</script>

auf diese Weise wird auch verhindert, dass die Eingabetaste mehr als einmal gesendet wird

0
Cenas

Sie müssen verhindern, dass das Formular mehr als einmal gesendet wird. Das Deaktivieren der Schaltfläche ist nicht die richtige Lösung, da das Formular auf andere Weise gesendet werden könnte.

JavaScript:

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

Sobald das Formular ordnungsgemäß deaktiviert ist, können Sie das Erscheinungsbild anpassen.

CSS:

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}
0
Fabio Caccamo

Ich benutze Chrome. Hast du eine Idee, warum ich dieses Problem habe?

Nun, das erste Mal, als ich damit umgegangen bin, habe ich es so gelöst:

function blockButtons() {
   $('button:submit').click(function(){
    $('button:submit').attr("disabled", true);
   });
}

Das hat perfekt funktioniert, aber ... in Mozilla Firefox. Google Chrome hat es nicht übermittelt, daher habe ich es folgendermaßen geändert:

function blockButtons() {
   $('button:submit').click(function(){
      var form = $(this).parents('form:first');
    $('button:submit').attr("disabled", true);
    $('button:submit').css('opacity', 0.5);
    form.submit();
   });
}

Dies funktionierte beides in Mozilla Firefox. Danach hatten einige Benutzer, die alte Versionen von IE verwendeten, Schwierigkeiten, zwei Einsendungen zu erhalten. Das heißt, derjenige, der durch das Javascript initiiert wurde, und der Browser, der die Tatsache des Onclicks ignoriert und sowieso nur einreicht. Dies kann durch e.preventDefault behoben werden.

0
SPIRiT_1984

Sie können so etwas tun. Es ist gut mit mir zu arbeiten. 

<form method='post' onSubmit='disableFunction()'>
// your code here
</form>

Dann fügen Sie dies in einem Skript hinzu

<script>
function disableFunction() {
    $('#btn_submit').prop('disabled', true);
}
</script>
0
JunieL

Ich habe ein Problem in Chrome erhalten, das Formular wurde nicht gesendet. Habe ein paar verschiedene Codes ausprobiert, dies hat am besten für mich funktioniert (und sieht imo am besten aus):

  $('#form_id').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

Ersetzen Sie form_id durch die ID Ihres Formulars. Der Unterricht funktioniert natürlich auch: $('.form_class')

Quelle: JavaScript Coder

0
Rani Kheir