Submit de plusieurs formulaires avec la même class

Version imprimable

Bonjour,

J'ai une fonction qui affiche un fil d'actualités sur mon site.
Avec en dessous de chaque actu, un formulaire pour les commentaires validé en ajax.

Le formulaire est validé avec la touche ENTER, avec la fonction "keyup" qui s'applique sur l'input du formulaire.
Tous les input ont la même class (.text_coms), donc au moment du submit avec ENTER, ça ne fonctionne que sur la dernière actu.

Je précise que la div parent qui contient toute l'actu, à pour class "statutPost"

Voici le code jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.text_coms').keyup(function(e){
        var parent = $(this).parents('.statutPost');
        var coms_text = encodeURIComponent($('.statutCom',parent).find('input[name=coms_text]').val());
        var user_id = $('.statutCom',parent).find('input[name=user_id]').val();
        var statut_id = $('.statutCom',parent).find('input[name=statut_id]').val();
        var dataString = "user_id="+user_id+"&statut_id="+statut_id+"&coms_text="+coms_text;
        if(e.keyCode == 13){
                $.ajax({
                        type: 'POST',
                        url: '../users/ajax/comment/create.php',
                        data: dataString,
                        success: function(data){
                                $('input[name=coms_text]').attr('value','');
                                $('.newsCom',parent).append(data).hide().fadeIn('fast');
                        }
                });
        }
        return false;
});

Voici le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form method="post" action="#" class="statutCom" onsubmit="return false;">
        <div class="postContainer">
                <div class="newsCom"></div>
                <div class="comsComposer showCom">
                        <div class="clearfix">
                                <div class="avatarCom">
                                        <img src="users/upload/avatars/<?php echo verifAvatar(); ?>" height="34" width="34" alt="" />
                                </div>
                                <div class="inputCom">
                                        <input type="hidden" name="user_id" value="<?php echo info($id,'id'); ?>" />
                                        <input type="hidden" name="statut_id" value="<?php echo infoStatut('statut_id') ?>" />
                                        <input type="text" class="text_coms" name="coms_text" placeholder="Écrire un commentaire" value="" />
                                </div>
                        </div>
                </div>
        </div>
</form>

Merci d'avance

Difficile de voir d'où ce la peut venir. Ton code jQuery fait appel à des éléments HTML que tu ne montres pas.
Ceci dit, je trouve que tel quel, tu compliques beaucoup les choses inutilement... :?

* Déjà, inutile d'aller chercher des éléments du DOM alors que tu n'en auras pas besoin si la touche n'est pas Enter, tu devrais faire cela à l'intérieur de la condition.
* Manifestement, tu n'as besoin que des trois input (dont les deux cachés) pour ton traitement, il est donc inutile dans ce cas de remonter dans l'arborescence pour récupérer des éléments qui ne servent en réalité à rien.
* Il semble aussi que ton formulaire n'est jamais réellement soumis, dans ce cas, inutile d'utiliser des input hidden, utilise plutôt des attributs data-* histoire d'avoir toutes les informations utiles sur le même élément.
* Enfin, n'oublie pas que dans le gestionnaire d'événement, this fait référence à l'objet ayant reçu l'événement. ;)

Bref, avec tout ça, ton code peut être facilement simplifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form method="post" action="#" class="statutCom" onsubmit="return false;">
        <div class="postContainer">
                <div class="newsCom"></div>
                <div class="comsComposer showCom">
                        <div class="clearfix">
                                <div class="avatarCom">
                                        <img src="users/upload/avatars/<?php echo verifAvatar(); ?>" height="34" width="34" alt="" />
                                </div>
                                <div class="inputCom">
                                        <input type="text" data-user="<?php echo info($id,'id'); ?>" data-statut="<?php echo infoStatut('statut_id') ?>" class="text_coms" name="coms_text" placeholder="Écrire un commentaire" value="" />
                                </div>
                        </div>
                </div>
        </div>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('.text_coms').keyup(function(e){
        if(e.keyCode == 13){
                e.preventDefault();
                var $this = $(this);
                var dataString = "user_id="+$this.data('user')+"&statut_id="+$this.data('statut')+"&coms_text="+encodeURIComponent($this.val());
                $.ajax({
                        type: 'POST',
                        url: '../users/ajax/comment/create.php',
                        data: dataString,
                        success: function(data){
                                $('input[name=coms_text]').val('');
                                $this.parent('.postContainer').find('.newsCom').append(data).hide().fadeIn('fast');
                        }
                });
        }
});

11/04/2014, 13h14
nico44530

Merci beaucoup, ça fonctionne très bien :)