Comment ajouter des boîtes de dialogue de confirmation à mes soumissions de formulaire JavaScript ?

Confirmations de soumission de formulaire JavaScript avec boîtes de dialogue

Lors de la soumission d'un formulaire, il est souvent souhaitable de demander aux utilisateurs de confirmer leurs saisies avant de le soumettre. Cela permet d'éviter les soumissions accidentelles et garantit que tous les champs obligatoires sont remplis correctement.

Confirmation de la soumission du formulaire

Pour afficher une boîte de dialogue de confirmation avant de soumettre un formulaire, utilisez JavaScript méthode confirm(). Voici un exemple :

<code class="js">function confirmFormSubmission() {
  if (confirm("Confirm submission?")) {
    // Form submission allowed
  } else {
    // Submission canceled
  }
}</code>

Modification de votre code

Pour implémenter cela dans votre code, remplacez votre fonction show_alert() par le code suivant :

<code class="js">function confirmFormSubmission() {
  if (confirm("Are the fields filled out correctly?")) {
    document.form.submit(); // Submit the form
  } else {
    return false; // Cancel submission
  }
}</code>

Confirmation JavaScript en ligne

Vous pouvez également utiliser du JavaScript en ligne dans la balise form :

<code class="html"><form onsubmit="return confirm('Confirm submission?');"></code>

Cela élimine le besoin d'une fonction externe.

Validation et confirmation

Si vous devez effectuer une validation avant de soumettre le formulaire, vous pouvez créer une fonction de validation et l'utiliser dans l'événement onsubmit du formulaire :

<code class="js">function validateForm(form) {
  // Validation code goes 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>

<code class="html"><form onsubmit="return validateForm(this);"></code>

Cette approche vous permet de combiner validation et confirmation en une seule étape, garantissant que le formulaire est à la fois valide et destiné à être soumis.

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!