Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man ein Bestätigungs- oder Stornierungsdialogfeld für die Übermittlung von JavaScript-Formularen?

Wie implementiert man ein Bestätigungs- oder Stornierungsdialogfeld für die Übermittlung von JavaScript-Formularen?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-30 16:11:02144Durchsuche

How to Implement a Confirmation or Cancellation Dialog Box for JavaScript Form Submissions?

JavaScript-Formularübermittlung: Implementierung des Dialogfelds „Bestätigen“ oder „Abbrechen“

Um die Benutzererfahrung zu verbessern, ist es oft wünschenswert, vorher eine Bestätigungs- oder Abbruchaufforderung bereitzustellen ein Formular absenden. In diesem Artikel wird erläutert, wie ein solches Dialogfeld mithilfe von JavaScript implementiert wird.

Problemstellung:

Ein einfaches Formular erfordert einen Warndialog beim Klicken auf die Schaltfläche und bietet zwei Optionen:

  • Durch Klicken auf „OK“ wird das Absenden des Formulars ausgelöst.
  • Durch Klicken auf „Abbrechen“ wird das Warnfeld geschlossen, sodass der Benutzer das Formular anpassen und erneut senden kann.

Lösung:

Inline-JavaScript-Bestätigung

Eine bequeme Möglichkeit, einen Bestätigungsdialog anzuzeigen, ist Inline-JavaScript:

<code class="javascript"><form onsubmit="return confirm('Do you really want to submit the form?');"></code>

Dieser Code fügt dem Formular einen Onsubmit-Ereignishandler hinzu. Wenn auf die Schaltfläche „Senden“ geklickt wird, wird eine Bestätigungsaufforderung () ausgeführt, die einen booleschen Wert zurückgibt, der die Auswahl des Benutzers angibt.

Validierung und Bestätigung

Für Formulare, die eine Validierung erfordern , kann ein umfassenderer Ansatz verwendet werden:

<code class="javascript">function validate(form) {
  // Validation code here...

  if (!valid) {
    alert('Please correct the errors in the form!');
    return false;
  } else {
    return confirm('Do you really want to submit the form?');
  }
}</code>

In diesem Beispiel führt eine Funktion „validate()“ notwendige Formularvalidierungen durch und gibt „false“ zurück, wenn Fehler erkannt werden. Wenn das Formular gültig ist, gibt es true zurück und ein Bestätigungsdialog () wird angezeigt, der es dem Benutzer ermöglicht, mit der Übermittlung fortzufahren oder abzubrechen.

<code class="javascript"><form onsubmit="return validate(this);"></code>

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Bestätigungs- oder Stornierungsdialogfeld für die Übermittlung von JavaScript-Formularen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn