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

Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

1. W3C-Versionen von Flex Version 2009 Flag: Anze...

Neue Verwendung von watch und watchEffect in Vue 3

Inhaltsverzeichnis 1. Neue Verwendung der Uhr 1.1...

Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen

Vorwort: In MySQL wird die Funktion CONCAT() verw...

Grafisches Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 8.0.22.0

MySQL 8.0.22 Download-, Installations- und Konfig...

Meine persönliche Zusammenfassung der Installationsschritte für die MySQL 5.7-Datenbank

1.mysql-5.7.19-winx64.zip (das ist die kostenlose...

js realisiert das dynamische Laden von Daten durch Wasserfallfluss

In diesem Artikel erfahren Sie den spezifischen C...

Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung

Beispiel zur MySQL-Passwortänderung – ausführlich...

Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung

Viele Websites verfügen oben über eine feste Navi...

Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann

Vorwort Als MySQL den Standarddatenbankpfad änder...

Installieren Sie den Quellcode der MySQL-Datenbank 5.6 unter Linux und ändern Sie das Anmeldebenutzerkennwort

In diesem Artikel wird hauptsächlich die Installa...

Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto

Problembeschreibung: Beim Ausführen eines Befehls...

Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge

Im Allgemeinen : [1 wichtige Flagge] > [4 beson...

Beispiel für die Bereitstellung eines Django-Projekts mit Docker

Es ist auch sehr einfach, Django-Projekte mit Doc...

Tomcat verwendet Log4j zur Ausgabe des catalina.out-Protokolls

Das Standardprotokoll von Tomcat verwendet java.u...

Führen Sie die Schritte zum Upgrade von Nginx http auf https aus.

Der Unterschied zwischen http und https ist Bei m...