Das Submit-Ereignis des Formulars reagiert nicht

1. Problembeschreibung <br />Wenn JS verwendet wird, um die Übermittlungsmethode des Formulars aufzurufen, um das Formular direkt zu übermitteln, reagiert das Übermittlungsereignis nicht. Warum? Bitte antworten Sie, wenn Sie es wissen. Analog dazu habe ich zum Testen input.select() verwendet, aber es konnte auf das Auswahlereignis reagieren. Lassen wir diesen Grund vorerst beiseite und schauen wir uns zunächst an, wie sich das aktuelle Problem lösen lässt.
Codebeispiel, das nicht auf Ereignisse reagiert:
<form id="form1" action="http://www.jb51com"></form>
<Skripttyp="text/javascript">
var form = document.getElementById('form1');
form.onsubmit = Funktion() {
Alarm (1);
};
form.submit();
</Skript>
Im tatsächlichen Betrieb wird kein Alarm ausgegeben.
Obwohl die Verwendung der Submit-Methode zum Senden eines Formulars gegen das Prinzip des unaufdringlichen Javascripts verstößt, ist seine Verwendung manchmal erforderlich, z. B. bei der Verwendung von JS zum Senden des Suchformulars nach Auswahl eines Elements in einer Suchaufforderung (Auto-Vervollständigung).
2. Problemanalyse <br />Da es nicht auf Ereignisse reagiert, besteht die einzige Möglichkeit darin, diese Ereignisse manuell auszulösen. Bevor wir uns für die Lösung zum manuellen Auslösen entscheiden, sehen wir uns die Methode zur Ereignisregistrierung an:
Es gibt zwei „ursprüngliche“ Registrierungsmethoden, siehe die Codebeispiele:
<form id="form1" action="https://www.jb51.net" onsubmit="alert(1)"></form><form id="form1" action="https://www.jb51.net"></form>
<Skripttyp="text/javascript">
document.getElementById('form1').onsubmit = Funktion() {
Alarm (1);
}
</Skript>
Ein solches Registrierungsereignis fügt dem Formular eine „OnSubmit“-Methode hinzu. Daher ist die direkte Ausführung dieser Methode gleichbedeutend mit dem manuellen Auslösen des Ereignisses.
Siehe das Codebeispiel:
<Skripttyp="text/javascript">
form.onsubmit();
</Skript>
Dadurch wird eine Warnung ausgelöst.
Die „erweiterte“ DOM2-Standardregistrierungsmethode und die IE-Registrierungsmethode attachEvent werden jedoch bereits sehr häufig verwendet. Für diese Registrierungsmethoden gibt es die Methode onsubmit nicht. Bei Verwendung von form.onsubmit() wird direkt ein Fehler gemeldet.
3. Lösung <br />Natürlich bietet die „erweiterte“ Registrierungsmethode selbst auch eine Lösung zum manuellen Auslösen von Ereignissen, aber für DOM2-Standards und IE müssen unterschiedliche Programme geschrieben werden. Darüber hinaus ist dieses Programm auch für die „ursprüngliche“ Registrierungsmethode wirksam. Siehe das Codebeispiel:
<Skripttyp="text/javascript">
//IE Feuerereignis
wenn (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 Feuerereignis
} sonst wenn (Dokument.Ereigniserstellen) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('senden', falsch, wahr);
form.dispatchEvent(ev);
}
</Skript>
4. Code-Zusammenfassung <br />Wir werden die detaillierten Methoden hier nicht erläutern. Freunde, die damit nicht vertraut sind, lesen die relevanten Informationen bitte selbst. Lassen Sie uns den gesamten Code aneinanderreihen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=GBK">
<title>Senden</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</Kopf>
<Text>
<form id="form1" action="https://www.jb51.net"></form>
<Skripttyp="text/javascript">
var form = document.getElementById('form1');
//YUI-Registrierungsereignis
YAHOO.util.Event.on('form1', 'senden', Funktion() {
Alarm ('yui');
});
//DOM0-Registrierungsereignis
form.onsubmit = Funktion() {
Alarm(1);
};
//DOM2-Registrierungsereignis
wenn (form.addEventListener) {
form.addEventListener('senden', Funktion() {
Alarm(2);
}, FALSCH);
//IE-Registrierungsereignis
} sonst wenn (form.attachEvent) {
form.attachEvent('onsubmit', Funktion() {
Alarm(2);
});
}
//IE Feuerereignis
wenn (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 Feuerereignis
} sonst wenn (Dokument.Ereigniserstellen) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('senden', falsch, wahr);
form.dispatchEvent(ev);
}
</Skript>
</body>
</html>
Es gibt ein kleines Problem im gesamten Prozess. Unter FX wird form.submit() nicht benötigt. Das Formular wird direkt übermittelt, daher wird dieser Satz weggelassen. Wenn Sie den Grund kennen, antworten Sie bitte.
Diese Demo wurde in IE6/IE7/FX getestet.

<<: Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen

>>: Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

Das Submit-Ereignis des Formulars reagiert nicht

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

CSS3-Randeffekte

Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)

Holen Sie sich die IP und den Hostnamen aller Hosts auf Zabbix

Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

JavaScript zum Filtern von Arrays

Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern

Artikel empfehlen

Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design

Detaillierte Erklärung der Lösung für das Nginx-Panikproblem

jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10

Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design

Detaillierte Erläuterung der Angular-Routing-Grundlagen

Detailliertes Tutorial zur Integration von Apache Tomcat mit dem IDEA-Editor

So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus

Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps

Navicat für MySql Visueller Import von CSV-Dateien

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

Das kreativste 404-Seitendesign der Geschichte verbessert effektiv das Benutzererlebnis der Website

Von Vue berechnete Eigenschaften

Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)

Detailliertes Tutorial zur Installation von CUDA9.0 auf Ubuntu16.04