web-dev-qa-db-fra.com

Formulaire JavaScript - Boîte de dialogue Confirmer ou Annuler la soumission

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

  • Affiche un message d’alerte lorsque vous cliquez sur le bouton avec deux options:

    • Si vous cliquez sur "OK", le formulaire est envoyé.
    • Si vous cliquez sur Annuler, la boîte d’alerte se ferme et le formulaire peut être ajusté et soumis à 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>
javascripthtmlformssubmitconfirm
160
matt

Un simple inline JavaScript confirm suffirait:

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

Pas besoin d'une fonction externe à moins que vous ne fassiez une validation , que peut faire quelque chose comme ça:

<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);">
356
Samuel Liew

La question soulevée dans le commentaire est valide. Voici donc une révision différente, immunisée contre cela:

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

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/

20
Jason Gennaro

OK, modifiez 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. Simplement, il est plus facile de voir comment cela fonctionne. 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>
1
Alireza

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>

Il faut toujours garder à l'esprit que méthode et action attribut write after onsubmit attributs

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;
   }  
}
0
Sumit Kumar Gupta