Heim > Web-Frontend > js-Tutorial > Wie kann verhindert werden, dass Formularschaltflächen die Seite aktualisieren?

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

DDD
Freigeben: 2024-12-06 06:23:15
Original
679 Leute haben es durchsucht

How to Stop Form Buttons from Refreshing the Page?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage