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
Inhaltsverzeichnis Frage Serverebene und Speicher...
Bild-Tag <IMG> einfügen Die farbenfrohen Web...
<br />Um zu beweisen, dass sein Engagement f...
Inhaltsverzeichnis 1. Einführung in Nginx 2. Aufb...
1. Ursache Der offizielle Cerbot ist zu nervig. E...
Vorwort Vor Feierabend erhielt der Autor eine Anf...
1. Effekt-HTML senden <div id="senden-btn...
vertical-align wird hauptsächlich verwendet, um d...
Das Wechseln von Dateien ist eine gängige Operati...
Die meisten Leute kompilieren MySQL und legen es ...
Dieser Artikel beschreibt, wie die Koexistenz von...
Inhaltsverzeichnis Docker-Version Installieren Si...
In diesem Artikel erfahren Sie mehr über die Inst...
Inhaltsverzeichnis Warum brauchen wir eine Materi...
1. Wechseln Sie in das Verzeichnis /etc/init.d: ...