Soumettre un formulaire JavaScript - Boîte de dialogue Confirmer ou annuler la soumission

184

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

  • Affiche une boîte d'alerte lorsque l'utilisateur clique sur le bouton 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 ajusté et soumis de nouveau

Je pense qu'une confirmation JavaScript fonctionnerait mais je n'arrive pas à comprendre 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>

mat
la source

Réponses:

400

Une simple confirmation JavaScript en ligne suffirait:

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

Pas besoin de fonction externe sauf si vous effectuez une 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);">
Samuel Liew
la source
28

Le problème signalé dans le commentaire est valide, voici donc une révision différente qui est à l'abri de cela:

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

Vous pouvez 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/

Jason Gennaro
la source
27
onsubmit="return confirm('Is the form filled out correctly?');"serait beaucoup plus simple et le résultat serait le même.
Sk8erPeter
3

Simple et facile :

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

Pablo Salazar
la source
2

OK, changez simplement votre code en quelque chose comme ceci:

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

C'est aussi le code en cours d'exécution, je simplifie simplement le fonctionnement, exécutez simplement 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>

Alireza
la source
0

Si vous souhaitez appliquer une condition à la soumission du formulaire, vous pouvez utiliser cette méthode

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

Gardez toujours à l'esprit que l' attribut méthode et action écrivent après les attributs onsubmit

code javascript

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
Sumit Kumar Gupta
la source