web-dev-qa-db-fra.com

Empêcher le bouton d'envoi avec l'événement onclick de le soumettre

Je veux empêcher un bouton d'envoi avec l'événement onclick de soumettre:

$j('form#userForm .button').click(function(e) {
    if ($j("#Zip_field").val() > 1000){
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
        e.preventDefault();
        return false;
    }
});

C'est le bouton de soumission:

<button class="button vm-button-correct" type="submit"
 onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button>

Il affichera la fonction "alert" et supprimera également l'événement onclick, mais le formulaire est quand même soumis. Supprimez manuellement l'événement onclick avant de le soumettre pour résoudre le problème. Cependant, ceci est la fonctionnalité principale de et je ne veux pas l'enlever.

MODIFIER:

C'est certainement dû au sélecteur onclick. Comment puis-je forcer mon script jQuery à recharger instantanément l'événement onclick? l'ajout avant le code jquery: $j('form#userForm .button').attr('onclick',''); résoudra le problème .. cependant ma validation ne fonctionnera plus ...

jquerysubmitpreventdefault
10
Coen Ponsen

Vous devrez ajouter l'événement en tant que paramètre:

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#Zip_field").val(), 10) > 1000){
        event.preventDefault();
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
    }   
});

De plus, val() renvoie toujours une chaîne. Il est donc judicieux de la convertir en nombre avant de la comparer à un nombre. Je ne sais pas si vous ciblez tous les éléments .button de #userForm dans la fonction si vous devriez utiliser this à la place?

Si vous utilisez jQuery 1.7+, vous devriez vraiment envisager d'utiliser on() et off() pour cela.

22
adeneo

En gros, si vous modifiez le type de votre bouton de type="submit" à type="button", ce bouton ne sera pas soumis au formulaire et aucune solution de contournement n'est nécessaire.

J'espère que cela t'aides. 

13
lxgreen

N'oubliez pas qu'il existe des arguments fonction/événement, mais vous devez spécifier les paramètres:

$("#thing").click(function(e) {
  e.preventDefault();
});

De cette façon, la soumission est stoppée et vous pouvez donc la conditionner.

1
Grant Thomas

Le meilleur moyen est de tout faire à l’intérieur de votre gestionnaire d’événement submit du formulaire. Supprimez l'inline onclick et exécutez-le dans la fonction d'envoi

$j('#userForm').submit(function(e) {
    if (+$j("#Zip_field").val() > 1000){
        alert('Sorry we leveren alleen inomstreken hijen!');
        return false;
    }
    return myValidator(userForm, 'savecartuser');
});
0
ᾠῗᵲᄐᶌ