Wie kann verhindert werden, dass Formularschaltflächen die Seite aktualisieren?

Seitenaktualisierung mit Formularschaltflächen verhindern

Beim Erstellen von Formularen mit Schaltflächen tritt häufig ein Problem auf, bei dem Schaltflächenklicks unerwünschte Seitenaktualisierungen auslösen. Dies kann problematisch sein, insbesondere wenn die Seite dynamisch geladene Daten enthält, die bei der Aktualisierung zurückgesetzt werden.

Problembeschreibung

Im bereitgestellten Codeausschnitt:

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

Durch Klicken auf die Schaltfläche wird die Funktion getData() aufgerufen, die Seite wird jedoch auch automatisch aktualisiert. Dies liegt daran, dass der Standardtyp für eine Schaltfläche in einem Formular „Senden“ ist, wodurch eine Formularübermittlung initiiert und die Seite neu geladen wird.

Lösung

Um eine Seitenaktualisierung zu verhindern , ändern Sie das Typattribut der Schaltfläche wie folgt in „button“:

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

Durch die Festlegung von type="button" initiiert die Schaltfläche keine Formularübermittlung mehr. Stattdessen verhält es sich wie eine normale Schaltfläche, die lediglich das angegebene Onclick-Ereignis auslöst, ohne Auswirkungen auf die Seite.

Erklärung

Das Typattribut definiert den Typ der Schaltfläche. Die möglichen Werte sind:

• submit: Sendet das Formular ab. Dies ist der Standardwert.
• Zurücksetzen: Setzt das Formular auf seinen Ausgangszustand zurück.
• Schaltfläche: Fungiert als benutzerdefinierte Schaltfläche ohne Absenden oder Zurücksetzen des Formulars.

Durch das Festlegen von type="button" wandeln Sie die Schaltfläche effektiv in eine nicht sendende Schaltfläche um, die einfach ist löst die gewünschte JavaScript-Funktion aus, ohne dass es zu Seitenaktualisierungen kommt.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Formularschaltflächen die Seite aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!