it-swarm.com.de

Wie kann ich den Submit-Button deaktivieren, sobald er angeklickt wurde?

Ich habe am Ende des Formulars einen Senden-Button.

Ich habe der Übergabeschaltfläche die folgende Bedingung hinzugefügt:

onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"

Wenn Sie jedoch zur nächsten Seite wechseln, wurden die Parameter nicht übergeben, und es wurden Nullwerte übergeben.

34
maas

Wahrscheinlich übermitteln Sie das Formular zweimal. Entfernen Sie die this.form.submit() oder fügen Sie am Ende return false hinzu.

sie sollten mit onClick="this.disabled=true; this.value='Sending…';" enden

40
migajek

Sie sollten zuerst Ihr Formular absenden und dann den Wert Ihrer Einsendung ändern:

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
75

Deaktivierte HTML-Formularelemente werden beim Senden des Formulars nicht zusammen mit den Post/Get-Werten gesendet. Wenn Sie also den Submit-Button deaktivieren, sobald Sie darauf geklickt haben und dieser Submit-Button das Attribut name gesetzt hat, wird er nicht in den post/get-Werten gesendet, da das Element jetzt deaktiviert ist. Das ist normales Verhalten.

Eins Um dieses Problem zu überwinden, werden verborgene Formularelemente verwendet.

9
AlexV

getestet an IE11, FF53, GC58:

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"
6
user8161358

der Trick besteht darin, die Schaltfläche zu verzögern, um deaktiviert zu werden, und das Formular abzusenden, das Sie verwenden können window.setTimeout('this.disabled=true',0); yes, auch wenn 0 MS funktioniert

5
Frenchi In LA

Mit JQuery können Sie dies tun ..

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);
4
Manie

Sie müssen die Schaltfläche im onsubmit-Ereignis des <form> deaktivieren:

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
<script>

Hinweis: Auf diese Weise funktioniert das Formularelement mit dem Attribut required.

3
A-Sharabiani

Ich denke nicht, dass Sie this.form.submit() brauchen. Der Deaktivierungscode sollte ausgeführt werden, dann wird der Klick weitergegeben, der auf das Formular klickt.

2
Mitch Dempsey

Eine andere Lösung, die ich verwendet habe, ist, die Taste zu bewegen, anstatt sie zu deaktivieren. In diesem Fall haben Sie diese "Deaktivierungs" -Probleme nicht. Endlich möchten Sie, dass die Leute nicht zweimal drücken, wenn die Schaltfläche nicht vorhanden ist, können sie es nicht.

Sie können es auch durch eine andere Taste ersetzen.

function xxxx() {
// submit or validate here , disable after that using below
  document.getElementById('buttonId').disabled = 'disabled';
  document.getElementById('buttonId').disabled = '';
}
1
user3060544

Wenn Sie die Schaltfläche deaktivieren, wird das Paar name = value tatsächlich nicht als Parameter gesendet. Der Rest der Parameter sollte jedoch gesendet werden (solange die entsprechenden Eingabeelemente und das übergeordnete Formular nicht deaktiviert sind). Wahrscheinlich testen Sie nur die Schaltfläche oder sind die anderen Eingabefelder oder sogar das Formular deaktiviert?

1
BalusC
$('form#id').submit(function(e){
//OnClick code 
$(this).children('input[type=submit]').attr('disabled','disabled');
e.preventDefault();
return false;
});
0
Isuru Dinusha

Hier ist ein Drop-In-Beispiel, das die Lösung von Andreas Köberle erweitert. Es verwendet jQuery für den Event-Handler und das Document-Ready-Ereignis. Diese könnten jedoch auf JS umgestellt werden:

(function(document, $) {

  $(function() {
    $(document).on('click', '[disable-on-click], .disable-on-click', function() {
      var disableText = this.getAttribute("data-disable-text") || 'Processing...';

      if(this.form) {
        this.form.submit();
      }

      this.disabled = true;

      if(this.tagName === 'BUTTON') {
        this.innerHTML = disableText;
      } else if(this.tagName === 'INPUT') {
        this.value = disableText;
      }
    });
  });

})(document, jQuery);

Es kann dann wie folgt in HTML verwendet werden:

<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />
0
stephen.hanson

In diesem Arbeitsbeispiel bestätigt der Benutzer in JavaScript, dass er wirklich abbrechen möchte. Wenn true, ist die Schaltfläche deaktiviert, um Doppelklicks zu verhindern. Anschließend wird der Code ausgeführt, hinter dem die Datenbank aktualisiert wird.

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

Ich hatte Probleme, weil .net den Namen der Schaltfläche ändern kann

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

Da Sie OnClick mit OnClientClick überschreiben, funktioniert der Code dahinter nicht, auch wenn Ihre Überprüfungsmethode erfolgreich ist. Deshalb setzen Sie UseSubmitBehavior auf false, damit es funktioniert

PS: Du brauchst den OnClick nicht, wenn dein Code in vb.net ist!

In meinem Fall war das nötig.

Schaltfläche "Abschicken" auf Formular absenden deaktivieren

Es funktioniert problemlos in Internet Explorer und Firefox, aber es funktioniert nicht in Google Chrome.

Das Problem ist, dass Sie die Schaltfläche deaktivieren, bevor das Übermittlungsereignis tatsächlich ausgelöst werden kann.

0

Ihre Frage ist verwirrend und Sie sollten wirklich etwas Code posten, aber das sollte funktionieren:

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

Ich denke, wenn Sie this.form.submit() verwenden, geschieht dies natürlich, wenn Sie auf die Schaltfläche "Senden" klicken. Wenn Sie dieselbe Seite senden möchten, sollten Sie AJAX in der submitForm()-Methode (oben) verwenden.

Durch die Rückgabe von false am Ende des Attributwerts onClick wird das Auslösen des Standardereignisses (in diesem Fall das Senden des Formulars) unterdrückt.

0
TJ Koblentz

Ich habe den Trick gemacht. Wenn das Zeitlimit eingestellt ist, funktioniert es einwandfrei und sendet alle Werte.

    $(document).ready(function () {
        document.getElementById('btnSendMail').onclick = function () {
            setTimeout(function () {
                document.getElementById('btnSendMail').value = 'Sending…';
                document.getElementById('btnSendMail').disabled = true;
            }, 850);
        }
    });
0

Ich denke, der einfache Weg zum Deaktivieren der Schaltfläche ist :data => { disable_with: "Saving.." } Dadurch wird ein Formular gesendet und eine Schaltfläche deaktiviert. Außerdem wird die Schaltfläche nicht deaktiviert, wenn Sie Validierungen wie required = 'required'. haben.

0
chaitanya

    A better trick, so you don't lose the value of the button is

    function showwait() {
    document.getElementById('WAIT').style['display']='inline';
    document.getElementById('BUTTONS').style['display']='none';
    }

code umschließen, um in einem div anzuzeigen

id = WAIT style = "display: none"> anzuzeigender Text (div beenden)

code umschließen, um ihn in einem div zu verbergen

id = BUTTONS style = "display: inline"> ... oder was auch immer mit versteckt werden soll 
onclick = "showwait ();" (end div) 

0
Mike