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

CSS verwendet die BEM-Namenskonvention

Welche Informationen möchten Sie erhalten, wenn S...

Implementierungsprinzip der MySQL MyISAM-Standardspeicher-Engine

Standardmäßig generiert die MyISAM-Tabelle drei D...

Die detaillierteste Installation und Konfiguration von Redis in Docker (mit Bildern und Text)

1. Finden Sie eine geeignete Version von Redis fü...

CocosCreator Skelettanimation Drachenknochen

CocosCreator Version 2.3.4 Drachenknochenanimatio...

Ist ein Design, das den Designspezifikationen entspricht, ein gutes Design?

In den letzten Jahren meiner Karriere habe ich an...

Beispielcode zur Konvertierung von http in https mit nginx

Ich schreibe gerade ein kleines Programm. Da die ...

So rufen Sie das unterbrochene System in Linux auf

Vorwort Langsame Systemaufrufe beziehen sich auf ...

Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)

Ob das Mapping der Mausposition oder das Implemen...

Setzen Sie den Eingang auf schreibgeschützt über deaktiviert und schreibgeschützt

Es gibt zwei Möglichkeiten, schreibgeschützte Eing...

CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird

1. Setzen Sie den HTML-Code der Maskenebene und d...

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Detaillierte Erläuterung der Implementierungsmeth...

Vue+Openlayer Batch-Einstellung von Flash Point-Implementierungscode (basierend auf dem Postrender-Mechanismus)

Effektbild: Implementierungscode: <Vorlage>...

uniapp realisiert die Aufnahme-Upload-Funktion

Inhaltsverzeichnis uni-app Einführung HTML-Teil j...

Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

1. px px ist die Abkürzung für Pixel, eine relati...

Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Inhaltsverzeichnis Unkontrollierte Komponenten Ko...