Discussion :

[itokia]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

[Bovino]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[itokia]

Merci pour ton explication, je me sens vraiment tout bete
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

[Bovino]

Ceci dit, le code correct serait plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.