So senden Sie ein Formular, indem Sie auf einen Link in JavaScript klicken?

Ein HTML -Formular kann leicht eingereicht werden, indem Sie mit Hilfe von JavaScript auf ein beliebiges HTML -Element klicken. Das Formelement hat a einreichen() Die Methode und das Aufrufen dieser Methode mit einem externen Anruf sendet das Formular.

Dieser Artikel konzentriert sich darauf, ein Formular beim Drücken eines Links einzureichen. Um dies zu demonstrieren, wird ein Formular erstellt, das die Anmeldedetails des Benutzers aufnehmen wird, und nach Einreichung des Formulars wird es einfach den Namen des Benutzers auf die Konsole ausdrucken.

Schritt 1: Richten Sie die HTML -Elemente ein

Erstellen Sie ein neues HTML -Dokument und erstellen Sie in diesem Dokument ein Formular mit einer bestimmten ID und erstellen Sie in diesem Formular das Eingabefeld für Benutzername und Kennwort. Erstellen Sie danach anstelle der Schaltfläche Senden einen neuen Link mit der Verwendung des Tag und verwenden Sie das Onclick -Attribut und setzen Sie es gleich auf linkpress () Funktion:

Bitte geben Sie Ihren Benutzernamen ein

Bitte geben Sie Ihr Passwort ein

Link zur Einreichung

Zu diesem Zeitpunkt erzeugt dieses HTML -Dokument die folgende Webseite:

Unsere Webseite enthält zwei Eingabefelder und einen Link, der ein Onclick () -attribut aufweist.

Schritt 2: Erstellen Sie das Formular "Senden" in Link Press

Jedes Formularelement in der HTML enthält die methode subjekt (). Um ein Formular einzureichen, muss es im JavaScript referenziert werden, und dann muss die Methode subjekt () unter Verwendung dieser Referenz aufgerufen werden. Erstellen Sie in der Skriptdatei die Funktion linkpress () und fügen Sie die Funktionalität mit den folgenden Zeilen hinzu:

Funktion linkPress ()
Form = Dokument.GetElementById ("Form");
form.einreichen();

Die erste Zeile erhält die Referenz unseres Formular -Tags und speichert es in der Variablen “form”. Die zweite Zeile verwendet diese Referenz und ruft dann den Subjekt () des Formulars auf. Das Ausführen dieses HTML -Dokuments gibt das folgende Ergebnis vor:

Das Drücken des Links gibt das Formular ein, aber da keine Backend -Datei mit dem Empfang des Formulars verbunden ist, wird das Feld nur zurückgesetzt.

Schritt 3: fordern Sie den „Benutzernamen“ bei der Einreichung von Formular auf

Sie möchten eine Funktion hinzufügen bereit() nach dem vollständigen Laden der Webseite; Fügen Sie daher die Eigenschaft von hinzu “Onload”Auf dem Tag wie:

Und dann in der Skriptdatei die folgenden Zeilen hinzufügen:

Funktion Ready ()
Form = Dokument.GetElementById ("Form");
form.addEventListener ("subieren", Funktion (Ereignis)
Fall.Standard verhindern();
Name = Dokument.GetElementById ("Name").Wert;
alarm ("Willkommen" + Name);
);

Wenn das HTML -Dokument vollständig geladen ist:

• Ein Ereignishörer wird mit seiner Referenz in das Formularelement hinzugefügt.
• Dieser Ereignishörer hört auf die Submit -Veranstaltung zu
• Bei der Einreichung verhindert das Standardverhalten des Formulars (stoppen Sie die Umleitung).
• Am Ende begrüßt es den Benutzer mit seinem Benutzernamen.

Wenn die Webseite jetzt geladen wird, gibt es die folgende Ausgabe:

Wie Sie sehen können, wurde das Formular eingereicht, und durch Verhinderung des Standardverhaltens konnten wir die Notwendigkeit eines Backends zur Verwaltung der Daten von den Feldern vermeiden.

Abschluss

Es ist wirklich einfach, ein Formular einzureichen, indem Sie mit Hilfe von JavaScript auf einen Link klicken. Das Formularelement eines HTML -Dokuments hat diese Methode genannt einreichen(). Um das Formular einzureichen, müssen Sie nur einen expliziten Anruf bei dieser Methode tätigen, die wir in diesem Artikel gemacht haben.