11548 sujets

JavaScript, DOM et API Web HTML5

Probleme avec jQuery pour la gestion d'un formulaire

Bonjour,

Voila, je suis en train d'essayer de faire un système de blog,
tous les formulaire (pour écrire les commentaires) sont en dessous de chaque article en display: none; et avec jQuery je l'ai fait apparaître en animation a la demande de l'utilisateur. Bref, lorsque j'intercepte le submit d'un des formulaire avec jQuery:

$(document).ready( function () {
	$(".writeCom form").submit( function() {
		alert("ok");
        } );
} );

Avec le code XHTML suivant: 

<div class="writeCom">
	<form action="#" method="post">
		<label for="pseudo">Pseudo : </label><input name="pseudo" type="text" /><br />
		<label for="mail">* Email : </label><input name="mail" type="text" /><br />
		<textarea name="msg" cols="20" rows="4"></textarea><br />
		<input name="envoi" type="submit" class="submit" />
		<p class="comAuteur">* : Champ optionnel</p>
	</form>
</div>

résultat : j'obtiens 3 alertes "ok" (3 appels de la fonction jQuery)... et donc dans mon code, vu que je fais un appel Ajax pour enregistrer dans une base de donnée le commentaire, ben j'ai 3 fois le même commentaire dans les bases de données.
Est-ce que quelqu'un aurai une idée de comment faire pour que si un utilisateur clic sur le bouton submit du formulaire, la fonction $(".writeCom form").submit( function() { } s'exécute qu'une fois ? ou me serai-je trompé quelque par dans le nombre de la fonction ? Smiley ohwell

J'espère avoir été suffisamment clair dans mes explications...

merci par avance de votre aide.
Modifié par ThyB (15 Jan 2009 - 22:04)
Bonjour, et bienvenue Smiley cligne

Concernant ton problème c'est étrange en effet. Tu es certain que div.writeCom form est unique ?

Pour essayer autre chose, je te propose de mettre un id à ton form et de remplacer ton .writeCom form par #id_du_form dans l'évènement... (ce qui d'ailleurs est mieux d'un point de vue perf).

Edit : J'ai rien dit, forcément tu as plusieurs formulaires donc tu ne peux mettre d'identifiant... une page en ligne peut-être ? Sinon, à priori je dirai que ton problème vient du fait que ton bouton submit envoie tous les forrmulaires de la page (d'où le fait que tu as plusieurs alert)...
Modifié par SolMJ (15 Jan 2009 - 22:47)
j'avais pensé la même chose mais ce qui est bizarre (voir irrationnelle ?? Smiley lol ) c'est que quand je met à la place de alert("ok"); :


$(this).find("input:text").each(function(){
  var nom = $(this).attr("name");
  var valeur = $(this).val();
  alert(nom+':'+valeur);
});


si je rentre dans un des formulaire le pseudo thyb et le mail thibaud.arnault@gmail.com
je reçois 6 alert:
> pseudo : thyb
> mail : thibaud.arnault@gmail.com
> pseudo : thyb
> mail : thibaud.arnault@gmail.com
> pseudo : thyb
> mail : thibaud.arnault@gmail.com

Edit : J'ai fait un teste, pour le moment, j'avais donc 3 articles et j'obtenais donc 3*2 (input) donc 6 alert. j'ai rajouté un article a la base de donné et maintenant je recois 8 alert (avec les données du formulaire que j'ai rempli uniquement (bizarre!)) donc le problème vient bien des autres formulaires... Mais comment résoudre le problème? est ce que quelqu'un a déjà eu un problème du genre?
Modifié par ThyB (15 Jan 2009 - 23:48)
Ce serait bien que tu donnes les fichiers complets (et pas juste un bout de code). Je testerai en local si j'ai 5 min (et si personne ne trouve avant Smiley cligne )

tu donnes le html généré d'une page qui pose problème bien sûr, pas le code serveur (php ou autre)...

Parce que j'ai fait un test sur ton 1er code (en copiant deux fois le formulaire html) et j'obtiens bien qu'un seul alert lorsque je clique sur l'un ou l'autre bouton submit...
Modifié par SolMJ (16 Jan 2009 - 11:25)
Administrateur
ThyB a écrit :
Bonjour,

Voila, je suis en train d'essayer de faire un système de blog,
tous les formulaire (pour écrire les commentaires) sont en dessous de chaque article en display: none; et avec jQuery je l'ai fait apparaître en animation a la demande de l'utilisateur.

Bonjour,

d'un point de vue accessibilité, ce serait bien de les afficher par défaut, de les cacher avec JS une fois la page chargée si tel est ton souhait et ensuite de faire comme tu le fais Smiley cligne (enfin c'est peut-être déjà le cas?)
Du coup sans JS on peut quand même commenter ...
Modifié par Felipe (16 Jan 2009 - 12:38)
c'est déjà jQuery qui cache les formulaire une fois le document chargé .hide()

La je suis à mon IUT donc j'ai pas accès à mes fichiers, mais j'ai le lien de mon serveur apache qui tourne toute la journée (étant en ip dynamique, l'ip risque de changé demain matin) mais bon si ca peut servir: http://90.24.42.228/blog/

si vous clickez sur "Montrer/cacher les commantaires", on voit les commentaires s'afficher, et après on peut clické sur "rédiger un commentaire" pour faire apparaitre le formulaire et si on clic sur "envoi" on reçoit bien les informations du formulaire mais en 4 exemplaires (ce qui est facheux)...

Merci en tout cas pour votre aide =)
ThyB a écrit :
c'est déjà jQuery qui cache les formulaire une fois le document chargé .hide()


Sauf que toute ta page est chargée en javascript... le problème d'accessibilité dont parle Felipe est donc bien présent.

Je te conseille déjà de revoir l'architecture de ton code et d'essayer de faire quelque chose de plus simple : Afficher toute la page par défaut et cacher les commentaires en JS est une bonne solution.
Modifié par SolMJ (16 Jan 2009 - 13:41)
hm étant donné que tous les texte du site son dynamic (base de donnée) et que je voulais faire un site en ajax, je voyai pas d'autre alternative que de faire $("#site").load(fichier.php);
ThyB a écrit :
hm étant donné que tous les texte du site son dynamic (base de donnée) et que je voulais faire un site en ajax, je voyai pas d'autre alternative que de faire $("#site").load(fichier.php);


C'est le genre de dérives typiques de sites "web 2.0". On fait de l'ajax, mais on sait pas pourquoi Smiley cligne

Si on ne connait pas ton code on ne sait même pas que c'est de l'ajax... Utiliser de l'ajax implique d'améliorer l'expérience utilisateur, l'ergonomie. Quel intérêt d'utiliser des requêtes asynchrones, alors que tu pourrais obtenir exactement le même résultat avec juste PHP et (X)HTML...
Modifié par SolMJ (16 Jan 2009 - 14:24)
J'ai trouver ... je suis trop stupide ... désolé de vous avoir fait perdre votre temps... en faite je faisais un include de la page php qui contenait le formulaire après chaque article et.... il y avait <script type="text/javascript" src="controle/writeCom.js"></script> ... donc comme il y a 4 articles, le script était chargé 4 fois .... et donc sa générait 4 fois alert("ok") lol :] Merci pour votre aide Smiley smile
Modifié par ThyB (16 Jan 2009 - 23:22)
Sujet clos
Aller à