Wie deaktiviere ich die Schaltfläche „Senden“ beim Absenden eines Formulars in JavaScript?

In HTML ist das „EinreichenDie Schaltfläche „“ wird verwendet, um die Informationen des Formulars an den Formular-Handler zu senden. Der „Formular-Handler“ ist eine externe Datei auf dem Server, die die Informationen eines auf der Website platzierten Formulars sammelt. Die Schaltfläche „Senden“ ist zum Zeitpunkt der Formularerstellung standardmäßig aktiviert. Der Benutzer kann ihren Status jedoch auch verwalten, d. h. je nach Bedarf manuell aktivieren/deaktivieren.

In dieser Anleitung werden alle möglichen Methoden erläutert, um die Schaltfläche „Senden“ beim Absenden eines Formulars in JavaScript zu deaktivieren. Die wichtigsten Punkte dieser Anleitung sind unten aufgeführt:

Beginnen wir mit der ersten Methode.

Bevor wir mit der praktischen Umsetzung fortfahren, schauen Sie sich zunächst den unten aufgeführten HTML-Code an.

HTML Quelltext

Bewerbungsformular

Name:

Adresse:

Kontaktnummer:

In den obigen Codezeilen:

  • Der „
    “-Tag erstellt ein Formular mit der ID „myForm“.
  • Innerhalb dieses Formulars werden drei Eingabefelder mit dem „“-Tag mit dem Typ „Text“ und dem Platzhalterattribut.
  • Fügen Sie anschließend nach dem Formular einen Zeilenumbruch durch das „
    “ Etikett.
  • Schließlich ist die „“-Tag fügt eine Schaltfläche mit dem Typ „Senden“ und der ID „btn“ ein.

Notiz: Die einzelnen Codezeilen werden in allen Methoden dieser Anleitung befolgt.

Methode 1: Verwenden der Methode „event.preventDefault()“

Der „Ereignis.preventDefault()”-Methode verhindert das Standardverhalten des Ziel-HTML-Elements, wenn das zugehörige Ereignis ausgelöst wird. Bei dieser Methode wird sie verwendet, um die Schaltfläche „Senden“ beim Senden des Formulars zu deaktivieren.

JavaScript Code

const button = document.querySelector(„Formular“);

document.getElementById(„btn“).addEventListener(„klicken“, (Ereignis) => {

event.preventDefault();

});

Im obigen Codeblock:

  • Erstens wendet die Variable „button“ die „Abfrageselektor()“-Methode, um auf das erste Formularelement des angegebenen Dokuments zuzugreifen.
  • Als nächstes wird die „getElementById()”-Methode greift über die ID auf den Absenden-Button zu. Anschließend ruft sie die „event.preventDefault()”-Methode, wenn das angegebene „Klick“-Ereignis über die „addEventListener()“ Methode.

Ausgabe

Die Ausgabe zeigt, dass die Schaltfläche „Senden“ nicht funktioniert, d. h. das angegebene Formular nicht übermittelt.

Methode 2: Verwenden der Schaltflächeneigenschaft „deaktiviert“

Die HTML-DOM-Schaltfläche „deaktiviertDie Eigenschaft legt fest oder ruft ab, ob die Schaltfläche deaktiviert oder aktiviert ist. Sie funktioniert mit booleschen Werten, d. h. „true“ und „false“. Standardmäßig ist der Wert „false“, was bedeutet, dass die Schaltfläche nicht deaktiviert ist.

Im folgenden Beispiel wird es verwendet, um die Schaltfläche „Senden“ beim Absenden eines Formulars zu deaktivieren.

HTML Quelltext

Ein „beim Klicken”-Ereignis ist mit der Schaltfläche „Senden“ verknüpft, um das „jsFunc()“, wenn der Benutzer darauf klickt.

JavaScript Code

Funktion jsFunc() {

document.getElementById(„btn“).disabled = true;

}

Dieses Mal verwendet die „jsFunc()“ die „getElementById()”, um über die ID „btn“ auf die Schaltfläche „Senden“ zuzugreifen, und deaktivierte sie dann durch Angabe der „deaktiviert“ Eigentumswert „WAHR“.

Ausgabe

Die Ausgabe zeigt, dass die Eigenschaft „deaktiviert“ die angegebene Schaltflächenfunktion beim Absenden des Formulars erfolgreich deaktiviert hat.

Notiz: Alle besprochenen Methoden sind auch auf Schaltflächen vom Typ „Schaltfläche“ anwendbar, die als „Senden“-Schaltflächen gelten.

Abschluss

Um die Schaltfläche „Senden“ beim Absenden des Formulars zu deaktivieren, verwenden Sie das JavaScript „Ereignis.preventDefault()”-Methode oder die Schaltfläche “deaktiviert”-Eigenschaft. Die Verwendung dieser beiden Ansätze hängt von der Wahl des Benutzers ab. Beide besprochenen Ansätze sind recht einfach und leicht zu verwenden. In diesem Handbuch werden alle möglichen Methoden zum Deaktivieren der Schaltfläche „Senden“ beim Senden von Formularen praktisch erläutert.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen