Diskussion zu den Themen Bildschaltflächenübermittlung und wiederholte Formularübermittlung

In vielen Fällen wird die Schaltfläche „Senden“ durch ein Bild ersetzt, um das Formular zu verschönern. Wenn Sie jedoch nicht auf die Details achten, wird das Formular wiederholt übermittelt, was zu unerklärlichen Fehlern führt, beispielsweise zum wiederholten Einfügen von Datenbankeinträgen.
Schauen wir uns den folgenden einfachen Formularcode an:

Code kopieren

Der Code lautet wie folgt:

Dieser Code ist korrekt und es kommt nicht zu doppelten Übermittlungsproblemen. „<input type="image">“ hat eigentlich die gleiche Funktion wie „<input type="SUBMIT">“. Durch Klicken auf das Bild wird die Submit()-Operation ausgeführt.
Manche Leute sind sich jedoch nicht sicher und fügen dem Bild eine Onclick-Aktion hinzu, beispielsweise den folgenden Code:

Code kopieren

Der Code lautet wie folgt:

Wenn Sie jetzt einmal auf die Bildschaltfläche klicken, wird das Bild zweimal übermittelt, was zu einer doppelten Übermittlung führt. Seine Funktion entspricht:

Code kopieren

Der Code lautet wie folgt:

Das ist natürlich nicht richtig.
Wenn Sie das Onclick-Ereignis verwenden müssen, können Sie <img> anstelle von <input type="image"> verwenden. Der folgende Code kann auch normal funktionieren:

Code kopieren

Der Code lautet wie folgt:

Ich bin selbst auf dieses Problem gestoßen, das dazu führte, dass der vom Benutzer beim Anmelden eingegebene grafische Bestätigungscode falsch war. Überlegen Sie: Der Benutzer hat die Übermittlung zweimal durchgeführt. Wird der Bestätigungscode bei der zweiten Übermittlung korrekt sein?
2. Wie kann die doppelte Übermittlung von Bildschaltflächen verhindert werden?

Code kopieren

Der Code lautet wie folgt:

Wie kann die doppelte Übermittlung einer solchen Schaltfläche verhindert werden?
Lösung:

Code kopieren

Der Code lautet wie folgt:

Mit dieser Methode kann das wiederholte Absenden mithilfe von Bildschaltflächen vermieden werden. Jetzt sind jedoch drei solcher Schaltflächen nebeneinander vorhanden. Ich möchte eine davon drücken, und alle drei können nicht mehr abgesendet werden.
Lösung:

Code kopieren

Der Code lautet wie folgt:

Es gibt zwei Möglichkeiten, ein Formular mithilfe eines Bildes zu übermitteln:
1.<input type="image" src="xxx.gif" >
Dieses Bild sendet das Formular automatisch ab, d. h. Typ="submit". Wenn Sie vor dem Absenden eine Beurteilung oder einen Test vornehmen müssen, verwenden Sie

Code kopieren

Der Code lautet wie folgt:

<Eingabetyp="Bild" src="xxx.gif" onclick="return dosubmit();">

Das Absenden des Formulars auf diese Weise führt jedoch dazu, dass das Formular zweimal übermittelt wird, was häufig dazu führt, dass Formularelemente wiederholt übermittelt werden und die Datenbank abnormal geschrieben wird! !
Besonders gravierend ist das Problem bei der Nutzung des Internet Explorers, bei der Nutzung von Firefox tritt jedoch kein Fehler auf! Beachten Sie hierbei bitte, dass Sie die Datenbank für dieselben Informationen eindeutig einrichten müssen!
Grund: Die Beschreibung des Bildes in HTML lautet: „Erstellen Sie ein Bildsteuerelement, das beim Anklicken dazu führt, dass das Formular sofort übermittelt wird.“
2.<img alt="Senden" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
Diese Übermittlungsmethode ist normal und weist keine Probleme auf. Die Wirkung ist die gleiche wie oben. Verwenden Sie daher die erste Methode seltener zum Senden von Daten, insbesondere in Struts-Anwendungen. Hinweis: css: cursor: hand kann nur vom IE erkannt werden, nicht von Firefox. Aber der Zeiger ist kompatibel!
Notiz! Unabhängig davon, welche Methode Sie übermitteln, muss sie zwischen <form></form> enthalten sein, andernfalls ist die Übermittlung ungültig.

<<: MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger

>>: Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue

Verwendung des SerialPort-Moduls in Node.js

Diskussion zu den Themen Bildschaltflächenübermittlung und wiederholte Formularübermittlung

Verwendung des SerialPort-Moduls in Node.js

JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse

Globale Aufrufimplementierung von Vue2.x Picker auf mobilen Endgeräten

Netzwerkmanagement und Netzwerkisolationsimplementierung von Docker-Containern

So gehen Sie mit zu vielen Docker-Protokollen um, die dazu führen, dass die Festplatte voll wird

CSS zum Erzielen eines schnellen und coolen Schüttelanimationseffekts

Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen

So verwenden Sie LibreOffice zum Konvertieren von Dokumentformaten unter CentOS

Beispiele für die Verwendung temporärer Tabellen in MySQL

Detaillierte Erläuterung von vier Lösungen für schwebende Probleme im CSS-Layout

Artikel empfehlen

Was Sie über die Transaktionsisolierung von msyql wissen müssen

jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

Detaillierte Einführung in das MySQL-Schlüsselwort Distinct

MySQL 5.7-Clusterkonfigurationsschritte

Tipps zur Verwendung des Befehls „Docker Inspect“

Erläuterung zur Optimierung der Tomcat+MySQL-Konfiguration mit hoher Parallelität

Rankings zur Benutzerfreundlichkeit chinesischer Websites

Eine kurze Diskussion über den JavaScript-Bereich

Über das WeChat-Gleitproblem des UniApp-Editors

Schritte zum Installieren einer RocketMQ-Instanz unter Linux

Eine kurze Erläuterung des MySQL-Ausführungsprozesses und der MySQL-Ausführungssequenz

Allgemeine Struktur-Tags in XHTML

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue