Wie kann verhindert werden, dass eine Schaltfläche in Firefox ein Formular sendet?

Verhindern der Formularübermittlung mit Schaltflächen

Bei der Arbeit mit Formularen ist es manchmal notwendig, Schaltflächen hinzuzufügen, die bestimmte Aktionen ausführen, ohne die Formularübermittlung auszulösen. In diesem Artikel befassen wir uns mit der Frage, wie verhindert werden kann, dass eine bestimmte Schaltfläche, beispielsweise die Schaltfläche „Entfernen“ im bereitgestellten Codeausschnitt, das Formular in Firefox sendet, während andere Schaltflächen dies zulassen.

Problemstellung

Im angegebenen HTML-Formular funktioniert die Schaltfläche „Hinzufügen“ ordnungsgemäß, während die Schaltfläche „Entfernen“ das Formular beim Klicken absendet. Dieses Verhalten ist spezifisch für Firefox und entsteht durch das Standardverhalten von HTML5-Schaltflächenelementen.

Verstehen des Problems

HTML5-Schaltflächenelemente erben gemäß den W3-Spezifikationen den Standardtyp „Senden“. . Dies bedeutet, dass Schaltflächen, sofern nicht ausdrücklich anders angegeben, das inhärente Verhalten haben, ihr enthaltenes Formular abzusenden.

Lösung: Überschreiben des Standardtyps

Um zu verhindern, dass die Schaltfläche „Entfernen“ das Formular absendet, ist es so Es ist erforderlich, den Standardtyp zu überschreiben. Dies kann erreicht werden, indem der Typ explizit als „Schaltfläche“ angegeben wird:

<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

Indem wir das Typattribut auf „Schaltfläche“ setzen, weisen wir die Schaltfläche an, sich wie ein Standardschaltflächenelement zu verhalten und das Formular nicht abzusenden. Wir müssen jedoch auch eine zusätzliche Return-Anweisung einfügen:

return false;

Diese Return-Anweisung verhindert, dass die Standardaktion der Schaltfläche (das Absenden des Formulars) ausgeführt wird. Durch die Kombination dieser beiden Elemente wird sichergestellt, dass die Schaltfläche „Entfernen“ die gewünschte JavaScript-Funktion auslöst, ohne das Formular abzusenden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass eine Schaltfläche in Firefox ein Formular sendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!