Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare

Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare

Sehen wir uns zunächst verschiedene Möglichkeiten zum Absenden eines Formulars an :
1. <!--Allgemeiner Senden-Button-->
<input type="submit" value="Senden">
2. <!--Benutzerdefinierter Senden-Button-->
<button type="Senden">Senden</button>
3. <!--Bildschaltfläche-->
<Eingabetyp="Bild" src = "btn.png">
Beschreibung: Wenn der Benutzer auf eine Schaltfläche oder Bildschaltfläche klickt, wird das Formular übermittelt. Eine Senden-Schaltfläche kann entweder mit <input> oder <button> definiert werden, indem deren Attributwert auf „submit“ gesetzt wird, während eine Bild-Schaltfläche definiert wird, indem der Typ-Attributwert von <input> auf „image“ gesetzt wird. Klicken wir also einfach auf die vom Code generierte Schaltfläche, können wir das Formular absenden.
4. Verhindern des Absendens des Formulars: Solange eine der oben aufgeführten Schaltflächen im Formular vorhanden ist und das entsprechende Formular-Steuerelement den Fokus hat, kann das Formular durch Drücken der Eingabetaste abgesendet werden. Wenn im Formular keine Schaltfläche „Senden“ vorhanden ist, wird das Formular durch Drücken der Eingabetaste nicht gesendet.
Wenn Sie ein Formular auf diese Weise absenden, löst der Browser das Übermittlungsereignis aus, bevor er die Anforderung an den Server sendet. Dies gibt uns die Möglichkeit, die Formulardaten zu validieren und zu entscheiden, ob das Absenden des Formulars zugelassen wird. Wenn das Standardverhalten dieses Ereignisses verhindert wird, wird die Übermittlung des Formulars abgebrochen. Der folgende Code verhindert beispielsweise, dass das Formular übermittelt wird:

Code kopieren
Der Code lautet wie folgt:

var EventUtil = {
addHandler: Funktion (Element, Typ, Handler) {
wenn (element.addEventListener) {
element.addEventListener(Typ, Handler, false);
} sonst wenn (element.attachEvent) {
element.attachEvent("on" + Typ, Handler);
} anders {
Element["ein" + Typ] = Handler;
}
},
getEvent: Funktion (Ereignis) {
Ereignis zurückgeben? Ereignis: Fenster.Ereignis;
},
preventDefault: Funktion (Ereignis) {
wenn (event.preventDefault) {
event.preventDefault();
} anders {
event.returnValue = falsch;
}
}
};
var form = document.getElementById("meinFormular");
EventUtil.addHandler(Formular, "Senden", Funktion () {
//Holen Sie sich das Ereignisobjekt
Ereignis = EventUtil.getEvent(Ereignis);
//Standardereignis verhindern
EventUtil.preventDefault(Ereignis);
});

Der Aufruf der Methode preventDefault() verhindert, dass das Formular übermittelt wird. Im Allgemeinen wird diese Technik verwendet, wenn die Formulardaten ungültig sind und nicht an den Server gesendet werden können.
5. In JavaScript können Sie ein Formular auch übermitteln, indem Sie die Methode „submit()“ programmgesteuert aufrufen.
Bei dieser Methode ist es nicht erforderlich, dass das Formular eine Schaltfläche zum Senden enthält, und das Formular kann jederzeit normal gesendet werden. Schauen wir uns ein Beispiel an:
var form = document.getElementById("meinFormular");
//Formular abschicken
form.submit();
Wenn ein Formular durch Aufrufen der Methode „submit()“ übermittelt wird, wird das Übermittlungsereignis nicht ausgelöst. Denken Sie daher daran, die Formulardaten vor dem Aufrufen dieser Methode zu validieren.
Das größte Problem, das beim Absenden eines Formulars auftreten kann, ist das wiederholte Absenden. Wenn nach dem ersten Absenden des Formulars längere Zeit keine Antwort erfolgt, kann es passieren, dass Benutzer ungeduldig werden. An diesem Punkt klicken Sie möglicherweise wiederholt auf die Schaltfläche „Senden“. Dies führt häufig zu Problemen (weil der Server doppelte Anfragen verarbeiten muss) oder Fehlern (wenn eine Bestellung aufgegeben wird, werden möglicherweise mehrere zusätzliche Kopien bestellt).
Es gibt zwei Möglichkeiten, dieses Problem zu lösen :
Deaktivieren Sie die Schaltfläche „Senden“, nachdem das Formular zum ersten Mal übermittelt wurde.
Verwenden Sie den Ereignishandler „onsubmit“, um nachfolgende Übermittlungsvorgänge des Formulars abzubrechen.
Als Nächstes stellen wir verschiedene Methoden zum Absenden über das Formular im Detail vor . <br />Methode 1: Verwenden Sie die Funktion onsubmit() des Formulars (wird häufig verwendet). Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
Funktion validateForm(){
if(document.reply.title.value == ""){ //Formular nach Formularnamen abrufen
alert("Bitte geben Sie den Titel ein!");
Dokument.Antwort.Titel.Fokus();
gibt false zurück;
}
if(document.forms[0].cont.value == ""){ //Formular über das Formular-Array abrufen
alert("Bitte geben Sie den Inhalt ein!");
Dokument.Antwort.Fortsetzung.Fokus();
gibt false zurück;
}
gibt true zurück;
}
<form name="antworten" method="posten" onsubmit="return validateForm();">
<input Typ="Text" Name="Titel" Größe="80" />

<textarea name="forts" cols="80" rows="12"></textarea>

<input type="submit" value="Senden" >
</form>
Beachten:
1. Das Onsubmit-Attribut muss das Schlüsselwort „return“ enthalten, andernfalls wird die Funktion direkt ohne Rückgabe ausgeführt.
2.validateForm muss einen booleschen Rückgabewert zurückgeben
3. Die Schaltfläche „Senden“ sollte als „Sendentyp“ geschrieben werden

Methode 2: Verwenden Sie die Funktion onclick() der Submit-Komponente des Eingabetyps, um das Attribut onsubmit="return validateForm()" im obigen Formular-Tag zu entfernen.
Fügen Sie der Schaltfläche „Senden“ wie folgt ein Onclick-Ereignis hinzu:
<input type="submit" value="Senden" onclick="return validateForm();">
Methode 3: Verwenden Sie die Funktion onclick() der Schaltflächenkomponente, um manuell zu übermitteln. Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
Funktion „Element ändern“ () {
wenn (trim(document.getElementById("itemName").value) == "") {
alert("Materialname darf nicht leer sein!");
document.getElementById("itemName").fokus();
zurückkehren;
}
mit (document.getElementById("itemForm")) {
Methode = "posten";
Aktion = "item.do?command=ändern&pageNo=${itemForm.pageNo}";
einreichen();
}
}
//zurückkehren
Funktion goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</Skript>
<Formularname="ArtikelFormular" ID="ArtikelFormular">
<Eingabename="Artikelnummer" Typ="Text" ID="Artikelnummer" Wert="${ Artikel.Artikelnummer }" >
<Eingabename="Artikelname" Typ="Text" ID="Artikelname" Wert="${ Artikel.Artikelname }" >
<input name="btnModify" type="button" id="btnModify" value="Ändern" onclick="modifyItem()">
</form>
Beachten:
1. Legen Sie beim Senden die Aktions- und Methodenattribute des Formulars fest und senden Sie es dann mit der Funktion form.submit() ab.

Die spezifische Implementierung des obigen Codes kann wie folgt bezeichnet werden:
http://www.bjp111.com/zhshlist.aspx
http://www.bjp111.com/huixiaolist.aspx
http://www.bjp111.com/daililist.aspx
Zusammenfassung für Anfänger :
Beim Validieren von Komponenten in einem Formular verwenden die ersten beiden, einschließlich des Formulars selbst, das Namensattribut.
Wenn beim Absenden des Formulars keine Antwort erfolgt und Sie sicher sind, dass kein Problem mit dem Code zum Absenden des Formulars vorliegt, überprüfen Sie bitte den JS-Code, bevor Sie das Formular absenden. Manchmal verursachen Fehler im vorherigen JS-Code unerklärliche Probleme.

<<:  Mehrere spezifische Methoden zur MySQL-Speicherplatzbereinigung

>>:  So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

Artikel empfehlen

Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung

Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...

Beispiel für den Export und Import von Docker-Containern

Inhaltsverzeichnis Docker-Container exportieren D...

Zusammenfassung der Methoden zur Änderung von MySQL-Passwörtern

Methoden zum Ändern von Passwörtern vor MySQL 5.7...

Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)

Vorwort Apropos Textsuchtools: Jeder sollte grep ...

CocosCreator klassisches Einstiegsprojekt flappybird

Inhaltsverzeichnis Entwicklungsumgebung Game-Engi...

So gehen Sie nach der MySQL-Tabellenpartitionierung problemlos online

Inhaltsverzeichnis Zweck der Tabelle Zum Beispiel...

Detaillierte Erläuterung des Problems bei der Konfiguration des Servlet-URL-Musters in Tomcat

Beim Konfigurieren von web.xml für Tomcat ist Ser...

Fallstricke bei langsamen MySQL-Abfragen

Inhaltsverzeichnis 1. Langsame Abfragekonfigurati...

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...

Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows

1. Ursache: Ich muss eine SQL-Datei importieren, ...

So installieren Sie den Zookeeper-Dienst auf einem Linux-System

1. Erstellen Sie den Ordner /usr/local/services/z...

Verwenden Sie IISMonitor, um Webseiten zu überwachen und IIS automatisch neu zu starten

Inhaltsverzeichnis 1. Tool-Einführung 2. Arbeitsa...

Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)

Mysql5.5 Dual-Maschine-Hot-Standby Durchführung I...

Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)

EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...

Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach

Swiper ist ein mit reinem JavaScript erstelltes P...