Verhindern Sie das Aktualisieren der Seite, wenn Sie auf die Schaltfläche im Formular klicken

Ich habe ein Problem bei der Verwendung von Schaltflächen im Formular. Ich möchte, dass diese Taste die Funktion aufruft. Es tut es, aber mit unerwünschtem Ergebnis, dass es die Seite aktualisiert.

Mein einfacher Code geht so

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Beim Klicken auf die Schaltfläche wird die Funktion mit aktualisierter Seite aufgerufen, wodurch alle meine vorherigen Anforderungen zurückgesetzt werden, die sich auf die aktuelle Seite auswirken, die das Ergebnis der vorherigen Anforderung war.

Was kann ich tun, um die Seitenaktualisierung zu verhindern?

Lassen Sie getData()false zurückgeben. Dies wird es beheben.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

In type="button"der Schaltfläche.

<button name="data" type="button" onclick="getData()">Click</button>

Der Standardwert typefür eine Schaltfläche ist submit, der das Formular in Ihrem Fall selbst veröffentlicht und es wie eine Aktualisierung aussehen lässt.

Alles, was Sie tun müssen, ist ein Typ-Tag zu setzen und die Typ-Schaltfläche zu erstellen.

<button id="btnId" type="button">Hide/Show</button>

Das löst das Problem

Das Problem ist, dass es die Formularübermittlung auslöst. Wenn Sie die getDataFunktion return falseausführen, sollte das Senden des Formulars verhindert werden.

Alternativ können Sie auch die preventDefaultMethode des Ereignisobjekts verwenden:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Verwenden Sie anstelle des Schaltflächen-Tags das Eingabe-Tag. So was,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Wenn Ihre Schaltfläche die Standardeinstellung "Schaltfläche" ist, stellen Sie sicher, dass Sie das Typattribut explizit festlegen. Andernfalls wird es von WebForm standardmäßig als "Senden" behandelt.

Wenn Sie js verwenden, tun Sie dies

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Eine Javascript-Methode zum Deaktivieren der Schaltfläche selbst

document.getElementById("ID NAME").disabled = true;

Sobald alle Formularfelder Ihre Kriterien erfüllt haben, können Sie die Schaltfläche wieder aktivieren

Die Verwendung einer JQuery wird ungefähr so ​​sein

$( "#ID NAME" ).prop( "disabled", true);

Aus irgendeinem Grund wird in Firefox, obwohl ich return false;und myform.preventDefault();in der Funktion habe, die Seite aktualisiert, nachdem die Funktion ausgeführt wurde. Und ich weiß nicht, ob dies eine gute Praxis ist, aber es funktioniert für mich, ich füge javascript:this.preventDefault();in das Aktionsattribut ein.

Wie gesagt, ich habe alle anderen Vorschläge ausprobiert und sie funktionieren in allen Browsern, aber Firefox. Wenn Sie das gleiche Problem haben, versuchen Sie, das Ereignis "Verhindern" entweder javascript:return false;oder im Aktionsattribut hinzuzufügen javascript:this.preventDefault();. Versuchen Sie nicht, mit javascript:void(0);welcher Ihr Code brechen wird. Frag mich nicht warum :-).

Ich denke nicht, dass dies eine elegante Art ist, aber in meinem Fall hatte ich keine andere Wahl.

Aktualisieren:

Wenn Sie nach der Verarbeitung von Ajax einen Fehler erhalten haben, entfernen Sie die Attributaktion und führen Sie im onsubmitAttribut Ihre Funktion aus, gefolgt von der falschen Rückgabe:

onsubmit="functionToRun(); return false;"

Ich weiß nicht, warum all diese Probleme mit Firefox, aber ich hoffe, das funktioniert.

Die Rückgabefunktion funktioniert nicht in allen Fällen. Ich habe es versucht:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Es hat bei mir nicht funktioniert.

Ich habe versucht, innerhalb der Funktion false zurückzugeben, und es hat bei mir funktioniert.

function Reset()
{
    .
    .
    .
    return false;
}

Ich hatte das gleiche Problem. Das Problem liegt in der onclickFunktion. Es sollte kein Problem mit der Funktion geben getData. Es funktionierte, indem die onclickFunktion false zurückgab.

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Dieser ist die beste Lösung:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Hinweis: Mein Code ist sehr einfach.

Sie können Ajax und JQuery verwenden, um dieses Problem zu lösen:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>