Comment implémenter une boîte de dialogue de confirmation ou d'annulation pour les soumissions de formulaires JavaScript ?

Soumission d'un formulaire JavaScript : implémentation de la boîte de dialogue de confirmation ou d'annulation

Pour améliorer l'expérience utilisateur, il est souvent souhaitable de fournir une invite de confirmation ou d'annulation avant soumettre un formulaire. Cet article explique comment implémenter une telle boîte de dialogue à l'aide de JavaScript.

Énoncé du problème :

Un formulaire simple nécessite une boîte de dialogue d'alerte lors d'un clic sur un bouton, offrant deux options :

• Cliquer sur « OK » déclenche la soumission du formulaire.
• Cliquer sur « Annuler » ferme la boîte d'alerte, permettant à l'utilisateur d'ajuster le formulaire et de le soumettre à nouveau.

Solution :

Confirmation JavaScript en ligne

Un moyen pratique d'afficher une boîte de dialogue de confirmation consiste à utiliser JavaScript en ligne :

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

Ce code ajoute un gestionnaire d'événements onsubmit au formulaire. Lorsque vous cliquez sur le bouton Soumettre, il exécute une invite confirm() qui renvoie une valeur booléenne indiquant le choix de l'utilisateur.

Validation et confirmation

Pour les formulaires qui nécessitent une validation , une approche plus complète peut être utilisée :

<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>

Dans cet exemple, une fonction validate() effectue les validations de formulaire nécessaires et renvoie false si des erreurs sont détectées. Si le formulaire est valide, il renvoie true et une boîte de dialogue confirm() s'affiche, permettant à l'utilisateur de procéder à la soumission ou d'annuler.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!