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

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:

<form id="loginform" name="loginform" action="upload/2022/web/<input type=image src=login.gif" name="imagesubmit" />
</form>

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:

<form id="loginform" name="loginform" action="upload/2022/web/<input onclick=document.loginform.submit() type=image src=login.gif" name="imagesubmit" />
</form>

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:

<input type="SENDEN" onclick="senden()">

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:

<form id="loginform" name="loginform" action="upload/2022/web/<img onclick=document.loginform.submit() src=login.gif" name="imagesubmit" />
</form>

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:

<input type="image" src="bt.gif" onclick="submit()">

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

Code kopieren
Der Code lautet wie folgt:

<input type="image" src="bt.gif" onclick="submit();this.disabled=true">

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:

<script language="JavaScript">
Funktionstest () {
für (i = 0; i <document.getElementsByName ('t1'). Länge; i++)
document.getElementsByName('t1')[i].disabled=true;
}
</Skript>
<Formularname="f1" Methode="posten" Aktion="1.htm" Ziel="_blank" onsubmit="test()">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
</form>

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

Artikel empfehlen

Lassen Sie uns ausführlich über die LIMIT-Anweisung in MySQL sprechen

Inhaltsverzeichnis Frage Serverebene und Speicher...

Bild-Tag für HTML-Webseite

Bild-Tag <IMG> einfügen Die farbenfrohen Web...

Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein

<br />Um zu beweisen, dass sein Engagement f...

Implementierung der Nginx-Konfiguration des lokalen Image-Servers

Inhaltsverzeichnis 1. Einführung in Nginx 2. Aufb...

CSS Acht auffällige HOVER-Effekt-Beispielcodes

1. Effekt-HTML senden <div id="senden-btn...

Codebeispiel für die Implementierung des Linux-Verzeichniswechsels

Das Wechseln von Dateien ist eine gängige Operati...

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20 winx64

In diesem Artikel erfahren Sie mehr über die Inst...

So verwenden Sie vue3 zum Erstellen einer Materialbibliothek

Inhaltsverzeichnis Warum brauchen wir eine Materi...