Désactiver l'envoi automatique du formulaire en cliquant sur le bouton


180

J'ai un formulaire HTML où j'utilise plusieurs boutons. Le problème est que quel que soit le bouton sur lequel je clique, le formulaire sera soumis même si le bouton n'est pas de type «soumettre». Par exemple, des boutons tels que:, <button>Click to do something</button>entraînent la soumission du formulaire.

C'est assez pénible de faire un e.preventDefault()pour chacun de ces boutons.

J'utilise jQuery et jQuery UI et le site Web est en HTML5.

Existe-t-il un moyen de désactiver ce comportement automatique?

Réponses:


460

Les boutons tels que <button>Click to do something</button> les boutons d'envoi.

Préparez-vous type="button"à changer cela. type="submit"est la valeur par défaut (comme spécifié par la recommandation HTML ).


24
J'ai perdu une journée de sommeil en réparant en vain mon code parce que je ne connaissais pas cette spécification simple!
palerdot

4
Faisant écho à la notion de palerdot, heureux d'avoir trouvé cette note après une recherche rapide sur Google et de ne pas avoir tué des heures. Très bien, merci beaucoup.
brooklynsweb

2
@NiketJoshi - Cette déclaration ne semble rien avoir à voir avec la question à laquelle elle répond. Si vous avez une nouvelle question, posez-en une, mais assurez-vous de fournir un énoncé clair du problème et un exemple reproductible minimal .
Quentin

19

Vous pouvez simplement essayer d'utiliser return false (return false remplace le comportement par défaut sur chaque élément DOM) comme ça:

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

puis soumettez votre formulaire en utilisant myform.submit ()

Ou bien :

mybutton.onclick = function () 
{
   // do what you want
   return false
}

De plus, si vous utilisez type="button"votre formulaire ne sera pas soumis.


8

<button>Les boutons de soumission sont en fait, ils n'ont pas d 'autres fonctionnalités principales. Vous devrez définir le type sur bouton.
Mais si vous liez votre gestionnaire d'événements comme ci-dessous, vous ciblez tous les boutons et n'avez pas à le faire manuellement pour chaque bouton!

$('form button').on("click",function(e){
    e.preventDefault();
});

C'est e.preventDefault();.
hlcs

0

si vous voulez ajouter directement à l'entrée comme attribut, utilisez ceci

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" /> 

cela empêchera le comportement de soumission de formulaire


0

un autre:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.