Validation d'un formulaire avec un .submit()

Version imprimable

Bonjour,

Je possède un formulaire que je valide par un bouton JS.
Le formulaire est envoyé correctement mais j'ai l'impression qu'il est exécuté deux fois.
En effet je retrouve dans ma base de donnée, deux fois l'enregistrement.

Par contre lorsque j'ajoute un event.preventDefault() après le submit il est bien exécuté une seule fois.

Pourquoi dois je ajouter un preventDefault? je ne comprend pas.

Mon code JS qui valide le formulaire lors du click sur le bouton.
Code:

1 2 3 4 5 6 7 8 9 $( "#ValiderAjout" ).button({disabled: true}) .click( function( e ) { if($('#applicationbundle_gestionStructure_secteursAjout').val()!==''){ $('#btnAction').val("Bt_Ajouter"); $('#monAction').val("Secteur"); $('#form_recherche').submit(); e.preventDefault(); } else{e.preventDefault();} });
Merci

27/11/2013, 08h08
Bovino

Logiquement, quand tu soumets un formulaire... il est envoyé... puisque c'est son rôle.
e.preventDefault() permet donc, comme son nom et la doc l'indiquent, d'inhiber le comportement par défaut d'un élément (que ce soit un lien ou un bouton submit) et donc dans ton cas empêche d'envoyer le formulaire.
27/11/2013, 08h22
itokia

Merci Bonivo pour ta réponse rapide.

Oui j'avais bien compris à quoi fonctionné preventDefault mais je ne comprend pas pourquoi je dois l'utiliser après mon submit pour empêcher que mon formulaire s'envoie deux fois apres un seul clic sur le bouton.

Si on considère que #ValiderAjout est ton bouton submit :

Code:

1
2
3
4
5
6
7
8
9
$( "#ValiderAjout" ).button({disabled: true})
.click( function( e ) {    // .click() => premier submit
    if($('#applicationbundle_gestionStructure_secteursAjout').val()!==''){
        $('#btnAction').val("Bt_Ajouter");
        $('#monAction').val("Secteur");
        $('#form_recherche').submit();    // => second submit
        e.preventDefault();    // annule le premier submit
    } else{e.preventDefault();}
});

Sans preventDefault(), tu fais donc bien deux submit du formulaire...

27/11/2013, 08h54
itokia

Merci pour ton explication, je me sens vraiment tout bete :oops:
Je ne te dis pas combien de temps j'ai passé pour avoir cette réponse.

Comme tu peux le voir, je suis encore débutant en JS :?

Encore merci :ccool:

Ceci dit, le code correct serait plutôt

Code:

1
2
3
4
5
6
7
$( "#ValiderAjout" ).button({disabled: true})
.click( function( e ) {
    if($('#applicationbundle_gestionStructure_secteursAjout').val()!==''){
        $('#btnAction').val("Bt_Ajouter");
        $('#monAction').val("Secteur");
    } else{e.preventDefault();}
});

Inutile de soumettre le formulaire par script quand c'est ce qui est fait par défaut. ;)

27/11/2013, 09h14
itokia

Oui suite à ton message précédent c'est ce que j’avais fait :P

Je peux enfin continuer, qu'est ce que c'est énervant de rester bloqué sur une bêtise. Heureusement qu'il existe des génies de ton genre.
27/11/2013, 09h29
SpaceFrog

Oula !!! génie !!! Faut pas le flatter comme ça sinon le bœuf va vouloir devenir aussi gros que le grenouille ... :mouarf: