Formular abschicken mit JavaScript

1. HTML-Formular erstellen
2. Zugriff auf das Formular
3. Werte von Formularfeldern in JavaScript abrufen
4. Überprüfen Sie Daten aus Formularfeldern in JavaScript

In diesem Tutorial erfahren Sie, wie Sie ein Formular mit JavaScript senden.

Formulare helfen dabei, Daten von Benutzern zu entnehmen und in einer strukturierten Datenbank zu speichern. Das Einreichen von Formularen ist ein Schlüsselereignis, wenn wir mit verschiedenen Apps und Websites arbeiten. Es ist nicht so einfach, form.submit() aufzurufen oder auf die Schaltfläche Submit zu klicken. Wenn das Formular gesendet wird, wird das Übermittlungsereignis unmittelbar vor dem Senden der Anforderung an den Server ausgelöst. Hier wird JavaScript zum Einsatz kommen und die eingegebenen Daten validieren. Wir können sogar Objekte erstellen und verschiedene Attribute hinzufügen.

Um ein Formular zu senden, müssen wir zuerst ein Formular erstellen, auf das Formular zugreifen, Werte verschiedener Felder abrufen, alle Werte validieren und dann entweder auf die Schaltfläche Submit klicken oder for.submit() aufrufen.

HTML-Formular erstellen

Wir können ein HTML-Formular mit dem Element <form> erstellen.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

Das obige Formular hat zwei Attribute: action und method.

1. action: Gibt die URL an, die den Prozess der Formularübermittlung übernimmt.
2. method*: Gibt die HTTP-Methode an, mit der das Formular gesendet wird. Die Methode post hilft beim Speichern von Daten in einer Datenbank, indem die Daten im Hauptteil der Anforderung an den Server gesendet werden. Die Methode get hängt die Formulardaten an eine URL mit ? An.

Zugriff auf das Formular

Wir können mit einem beliebigen JavaScript-Selektor wie getElementByTag, getElementById usw. auf Formularelemente zugreifen.

let form = document.getElementById('signup-form');

Werte von Formularfeldern in JavaScript abrufen

Wir können auf die Eingabefelder im Formular zugreifen, indem wir entweder das Formularelementarray verwenden oder auf die Feld-ID verweisen. Nachdem wir auf das Feld zugegriffen haben, können wir das Attribut .values verwenden, um die in diesem Feld gespeicherten Werte abzurufen. Sobald wir die Formulardaten erfasst haben, können wir die Daten validieren, bevor wir mit der endgültigen Formularübermittlung fortfahren.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

Überprüfen Sie Daten aus Formularfeldern in JavaScript

Wir fügen der Schaltfläche “Senden” einen Ereignis-Listener hinzu und rufen unser Validierungsverfahren auf, bevor wir zur nächsten Seite übergehen. Beispiel: Für eine Anmeldeseite muss der Benutzer sowohl die E-Mail-Adresse als auch das Kennwort angeben.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

Im obigen Code haben wir eine kleine Validierungsprüfung geschrieben, um festzustellen, ob das Eingabefeld leer ist. Anschließend haben wir einen Ereignis-Listener an die Schaltfläche “Senden” angehängt, um die Daten zuerst zu verarbeiten, bevor sie an die Aktions-URL weitergeleitet werden. Wir stellen sicher, dass das Eingabefeld nicht leer ist, und verhindern in diesem Fall die Formularübermittlung, indem wir event.preventDefault() aufrufen. Auf diese Weise übernehmen JavaScript und HTML die vollständige Übermittlung des Formulars.