So senden Sie ein Formular mit JavaScript

JavaScript ist eine hochrangige Web-Programmiersprache, die von Tag zu Tag populär wird. Es gibt unseren Webseiten und Webanwendungen die Möglichkeit, bestimmte Aktionen auszuführen und sie interaktiv zu machen. JavaScript bietet Webentwicklern Formulare an, die Entwicklern beim Sammeln von Daten von Benutzern und Speichern dieser Daten in einer Datenbank unterstützen. Bei der Arbeit mit zahlreichen Apps und Websites ist die Einreichung von Formular ein kritisches Phänomen.

In diesem Beitrag werden wir durch die Einreichung eines Formulars mit JavaScript im Detail durchgehen, aber zunächst sehen wir, wie man ein HTML -Formular erstellt.

HTML -Form Erstellung

Ein HTML -Formular kann erstellt werden, indem das von HTML selbst angebotene Tag verwendet wird und zwei Attribute benötigt:

• Das erste ist die „Aktion“, die eine URL enthält (die die Einreichung des Formularprozesses übernimmt).
• Das zweite Attribut ist die „Methode“ mit einer HTTP -Methode.

Eine HTTP -Methode kann von verschiedenen Typen und die beiden am häufigsten verwendeten sind:

• Get (verwendet, um einige Daten von einem Server zu erhalten)
• Beitrag (verwendet, um Daten auf den Server zu schreiben)

Wir werden diese beiden Attribute in diesem Beitrag jedoch nicht verwenden, da wir nicht mit einem Server arbeiten.

Lassen Sie uns jetzt den HTML -Code für die Erstellung von Formular schreiben:

Einreichen

Im obigen Code haben wir ein Formular erstellt und dem gegeben Ausweis Attribut auf die Form, deren Bedeutung wir in einer Weile sehen werden. Als nächstes haben wir zwei Eingabefelder definiert und dann eine Taste definiert, die eine Art Art von hat einreichen. Am Ende haben wir a platziert Skript Tag und verwies auf den Dateinamen “Code.JSDas enthält unseren JavaScript -Code.

Zugriffsformular und abrufen Werte aus dem Formular

Nachdem wir mit dem Erstellen unseres Formulars fertig sind, können wir auf dieses Formular aus JavaScript zugreifen und dann die Werte von abrufen Nutzername Und Passwort die im Formular des Formulars vorhanden sind. Um auf das Formular zuzugreifen, verwenden wir die Ausweis Das zuvor über den folgende Code erwähnte Attribut:

var myform = document.GetElementById ('myForm');

Auf die gleiche Weise können wir die Werte auch von den Eingangsfeldern mit dem erhalten Ausweis Attribut im HTML -Formular angegeben. Der einzige Unterschied besteht darin, dass wir den Wert am Ende der geben werden GetelementById Damit können wir den Wert aus dem Eingangsfeld und nicht aus dem Element selbst abrufen:

var userername = document.GetElementById ('Benutzername').Wert;
var password = dokument.getElementById ('Passwort').Wert;

Formular einreichen und Daten validieren

Um das Formular einzureichen, werden wir das verwenden Event -Hörer das hört auf einen bestimmten Hörer kontinuierlich zu. Ein Ereignis ist einfach eine Interaktion von HTML und JavaScript, die von einem Benutzer oder Browser ausgelöst werden, wenn der Benutzer eine Seite manipuliert, und dieses Ereignis wird vom Ereignishörer behandelt.

var myform = document.GetElementById ('myForm');
// Event -Hörer, der für die Sendenereignis zuhört
myform.addEventListener ("subieren", Funktion (e)
e.Standard verhindern();
// Werte abrufen
var userername = document.GetElementById ('Benutzername').Wert;
var password = dokument.getElementById ('Passwort').Wert;
// Benutzername- und Passwortfelder validieren
if (userername == "|| password ==")
Warnung ("Bitte füllen Sie alle erforderlichen Felder");

anders
ALERT ("Formulare erfolgreich");

)

Im obigen Code erhalten wir zunächst die Referenz des Formulars mit dem Ausweis zuschreiben und dann einen Ereignishörer von initiieren "einreichen" in dieser Form. Die im Ereignishörer angegebene Funktion wird aufgerufen, sobald der Benutzer auf die Schaltfläche Senden klickt.

In der Funktion haben wir unsere Validierung durchgeführt. Wenn die Eingabefelder von Benutzername oder Passwort leer sind, werden wir eine Nachricht im Alarmbox angezeigt Bitte alle notwendigen Felder ausfüllen Andernfalls erhalten wir die Nachricht von Einreichung von Formulare erfolgreich.

Lassen Sie uns zunächst überprüfen, indem wir auf die Schaltfläche Senden klicken und die beiden Eingangsfelder leer und leer:

Lassen Sie uns nun die beiden Felder füllen und die Ausgabe sehen:

Abschluss

Formulare sind sehr hilfreich, um Daten von Benutzern zu sammeln und dann diese Daten in JavaScript zu manipulieren oder zu spielen. In diesem Beitrag haben wir Hilfe von einem HTML genommen Tag zum Initialisieren eines Formulars und definierte dann zwei Eingangsfelder und eine Taste. Als nächstes haben wir in einer JavaScript -Datei auf das Formularelement zugegriffen und dann die Werte der Formulationseingabefelder mit dem abgerufen Ausweis Attribut.

Am Ende haben wir die Frage beantwortet, wie ein Formular mit JavaScript eingereicht werden kann, indem wir einen Ereignishörer initiiert haben, der auf das Sendenereignis anhört. Wenn ein Benutzer auf die Schaltfläche Senden klickt, wird dieses Ereignis abgefeuert. Wir haben auch unsere Eingangsfelder in der Ereignishörerfunktion validiert.