JavaScript Form Submit - Boîte de dialogue de confirmation ou d'annulation de soumission

Question

Pour un simple formulaire avec une alerte qui demande si les champs ont été remplis correctement, j'ai besoin d'une fonction qui fasse ceci :

• Affiche une boîte d'alerte lorsque le bouton est cliqué avec deux options :

  • Si vous cliquez sur "OK", le formulaire est soumis.
  • Si vous cliquez sur "Annuler", la boîte d'alerte se ferme et le formulaire peut être modifié et soumis à nouveau.

Je pense qu'une confirmation JavaScript pourrait fonctionner mais je n'arrive pas à trouver comment.

Le code que j'ai maintenant est :

function show_alert() {
  alert("xxxxxx");
}

<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

Answer 1

Un simple confirmer JavaScript en ligne suffirait :

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

Pas besoin d'un fonction externe à moins que vous ne fassiez validation ce que vous pouvez faire comme ceci :

<script>
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?');
    }
}
</script>
<form onsubmit="return validate(this);">

Answer 2

Vous pourriez utiliser la fonction de confirmation JS.

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/

Answer 3

La question soulevée dans le commentaire est valable, voici donc une révision différente qui est immunisée contre cela :

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

Answer 4

Simple et facile :

<form onSubmit="return confirm('Do you want to submit?') ">
  <input type="submit" />
</form>

Answer 5

OK, changez juste votre code en quelque chose comme ça :

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

Voici également le code en cours d'exécution, juste pour faciliter la compréhension du fonctionnement, il suffit d'exécuter le code ci-dessous pour voir le résultat :

function submitForm() {
  return confirm('Do you really want to submit the form?');
}

<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>