Parcourir et sélectionner éléments

Version imprimable

Bonjour,

Je n'arrive pas a selectionner les champ que je veux dans mon élement.

Je fais un formulaire, ou on peut ajouter dynamiquement des emails (mail, type(a, cc, cci) et un commentaire)

j'arrive à récupérer mes adresses mais je n'arrive pas a afficher la valeurs des champs (mail, type et commentaire)

Comment faire ?

Merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<fieldset class="frame">
	<legend class="title">Adresses</legend>
	<div id="list">
	    <div class="address one_line" id="1">
		<div class="cell">
			<label for="mail">Mail :</label>
			<input id="mail" type="text" style="width:300px;" />
		</div>
		<div class="cell">
			<label for="type">Type :</label>
			<select id="type">
				<option value="a" selected>A</option>
				<option value="cc">Cc</option>
				<option value="cci">Cci</option>
			</select>
		</div>
		<div class="cell">
			<label for="comment">Commentaire :</label>
			<textarea id="comment" cols="50" rows="1"></textarea>
		</div>
	    </div>
	</div>
	<input class="button align" id="add_address" type="button" value="Ajouter" />
</fieldset>

Code:

1
2
3
4
5
6
7
$('#form').submit(function() {
	$('.address').each(function() {
		var address = $(this);
		alert(....);
	});
	return false;
});

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
$( "#add_address" ).on( "click", function(){
 
    // avec des attributs "name" (voir le HTML)
    // on dispose des méthodes serialize() et serializeArray()
    // <a href="http://api.jquery.com/serializeArray/" target="_blank">http://api.jquery.com/serializeArray/</a>
 
    console.log( $( "#myForm" ).serialize(), $( "#myForm" ).serializeArray() );
 
    return false;
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form id="myForm">
    <fieldset class="frame">
        <legend class="title">Adresses</legend>
        <div id="list">
            <div class="address one_line" id="1">
            <div class="cell">
                <label for="mail">Mail :</label>
                <input id="mail" name="mail" type="text" style="width:300px;" />
            </div>
            <div class="cell">
                <label for="type">Type :</label>
                <select id="type" name="type">
                    <option value="a" selected>A</option>
                    <option value="cc">Cc</option>
                    <option value="cci">Cci</option>
                </select>
            </div>
            <div class="cell">
                <label for="comment">Commentaire :</label>
                <textarea id="comment" name="comment" cols="50" rows="1"></textarea>
            </div>
            </div>
        </div>
        <input class="button align" id="add_address" type="button" value="Ajouter" />
    </fieldset>
</form>

04/03/2014, 22h30
la.lune

Mais si j'ai bien compris son objectif il n'est pas question de sélectionner les champs du formulaire(en une seul entité) ou sérialiser le contenu du formulaire, mais il veut clique sur ajouter, et un item(enregistrement) d'adresse s'ajoute quelque part, donc il veut ajouter plusieurs adresses à la fois dynamiquement et à la fin avec le bouton de submit du formulaire(qui n'est pas dans le html fourni) il veut sectionner la liste des adresses et il veut aussi avoir accès à chaque champs de la liste. Alors ça se voit qu'il n'a pas tout mis dans ce code.

Déjà il manque des choses sur le code fourni que nous comprenons pas leurs structures, mais où est ce que tu ajoutes les contenus une fois on clique sur ajouter, comment est la structure des données, il faut nous faire voir tout le formulaire en entier. Dans ton code javascript, tu sélectionne des éléments qui n'ont rien n'avoir avec le code html fourni.
Déjà, l'élément ".adresse" c'est quoi? il n'est pas fourni ici et même "#form" je vois juste "frame" qui n'est pas le formulaire.
04/03/2014, 23h50
danielhagnoul

Dans la question, il manque en effet du code et des explications sur le traitement des données.

C'est pourquoi je montre seulement deux manières pour récupérer les informations contenues dans le formulaire lorsque l'utilisateur clique sur le fameux bouton.

La récupération de l'information avec une méthode "serialize" à un instant T, n'a jamais impliqué la soumission du formulaire à cet instant.

La méthode "serializeArray" construit un "array" facilement exploitable pour traiter les données, quel que soit le traitement appliqué.
05/03/2014, 00h24
la.lune

Je comprends parfaitement ce que vous dites, et déjà je n'ai pas dis ce contrarie cela. Mais j'ai juste expliqué ce que je comprend de son code, je vois bien dans son code qu'il fait un callback après la summission du formulaire ce qui n'est pas logique s'il veut traiter les données recoltés avec plusisuers remplissage et clique sur Ajouter.
Je savais que ceci ("#form").submit(...) est une erreur, mais je voulais juste demander à ce qu'il donne plus de precision sur son code donc il pourra trouver quequ'un lui donner la bonne solution.

Bon ceci est une bonne solution de serialiser le formulaire à chaque clique sur ajout mais là il devra traiter l'affichage de chaque ajout et serialiser aussi, moi j'envisageais extraire les données là où ils les affiche directement car queleque soit la structure du DOM on peut exprtraire ce qu'on veut.

Bonjour,

Merci pour vos réponse, je réexplique mon problème. C'est peut-être la sérialisation la solution mais vu que je ne connais pas tout .. Je veux juste savoir comment récupérer la valeur des inputs que j'ai ajouté dynamiquement.

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form id="form">
	<fieldset class="frame">
		<legend class="title">Description</legend>
		<label for="name">Nom :</label>
		<input id="name" type="text" style="width:400px;" required />
	</fieldset>
	<fieldset class="frame">
		<legend class="title">Adresses</legend>
		<div id="list">
		****<div class="address one_line" id="1">
				<div class="cell">
					<label for="mail">Mail :</label>
					<input id="mail" type="text" style="width:300px;" />
				</div>
				<div class="cell">
					<label for="type">Type :</label>
					<select id="type">
						<option value="a" selected>A</option>
						<option value="cc">Cc</option>
						<option value="cci">Cci</option>
					</select>
				</div>
				<div class="cell">
					<label for="comment">Commentaire :</label>
					<textarea id="comment" cols="50" rows="1"></textarea>
				</div>
				<div class="cell">
					<a href="#" class="remove align" style="display:none;">&times;</a>
				</div>
		****</div>
		</div>
		<input class="button align" id="add_address" type="button" value="Ajouter" />
	</fieldset>
	<input class="button" type="submit" value="Ajouter" />
	<input class="button" id="back" type="button" value="Retour" />
</form>

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
	$('#add_address').click(function(event) {
		var lastDiv = $('#list > div').last();
		var id = parseInt(lastDiv.attr("id")) + 1;
 
		(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".remove").show();
 
		return false;
	});
	$('body').on('click', '.remove', function(event) {
		$(this).parent().parent().remove();
		return false;
	})
	$('#form').submit(function() {
		$('.list').each(function() {
			var list = $(this);
		});
		$.ajax({
			// Ajout des données
		});
		return false;
	});
});

Voilà j'ai mis tout le code, dans le js, c'est au niveau du each que j'aimerais récupérer les valeurs de mes inputs, pour les envoyées via ajax vers une autre page (php) qui va insérer les données dans ma base. Il faut sérialiser ?

Et pourquoi il ne faut pas utiliser $('form').submit ?

Bon, maintenant que tu as donné la structure de ta page, vu que l'affichage dynamique se fait sur le formulaire lui même et que ce sont les inputs qui sont affichés à nouveau, alors ça se voit que la sérialisation est la meilleur façon ici et tu aura à sérialiser une seule fois pas besoin de sérialiser à chaque ajoute, car tout est dans le formulaire.

Mais, normalement tu devrais déjà réinitialiser les champs ajouté à nouveau à vide, car ils ne font que porter le contenu qui était sur les champs précédents.

Revenons au vif du sujet, d'abord pour que la méthode de la sérialisation marche il faut d'abord nommer tes champs(donner l'attribut "name" une valeur), et la sérialisation se fait par clé/valeur(la clé c'est le nom du champs). Mais un cas un peu complexe se pressente en voulant utiliser la sérialisation, car si tu clique pour ajouter un nouveau adresse, tous les champs vont reprendre les même names que leurs correspondants dans champs qui precèdent.

A moins d'ajouter d'autre code pour renommer les noms des champs, mais on peut s'en passer. Et si tu veux avoir accès à chaque champs, alors il faudra juste un peu plus de prudence et une bonne maîtrise sur la manipulation des indices. Donc avant tout on peut connaitre le nombre total des adresse ajoutés, pour pouvoir boucler dessus par bloc de 3 vu que tu as trois champs, le nombre de bloc sera le nombre d’élément sérialisé moins 1(le nom) le tout divisé par 3, il faut voir le code javascript. Voici le code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 <form id="form">    <fieldset class="frame">
        <legend class="title">Description</legend>
        <label for="name">Nom :</label>
        <input id="name" name="nom" type="text" style="width:400px;" required />
    </fieldset>
    <fieldset class="frame">
        <legend class="title">Adresses</legend>
        <div id="list">
        ****<div class="address one_line" id="1">
                <div class="cell">
                    <label for="mail">Mail :</label>
                    <input id="mail" name="mail" type="text" style="width:300px;" />
                </div>
                <div class="cell">
                    <label for="type">Type :</label>
                    <select id="type" name="type">
                        <option value="a" selected>A</option>
                        <option value="cc">Cc</option>
                        <option value="cci">Cci</option>
                    </select>
                </div>
                <div class="cell">
                    <label for="comment">Commentaire :</label>
                    <textarea id="comment" name="commentaire" cols="50" rows="1"></textarea>
                </div>
                <div class="cell">
                    <a href="#" class="remove align" style="display:none;">&times;</a>
                </div>
        ****</div>
        </div>
        <input class="button align" id="add_address" type="button" value="Ajouter" />
    </fieldset>
    <input id="btn_form" class="button" type="submit" value="Ajouter" />
    <input class="button" id="back" type="button" value="Retour" />
</form>

Voici le code Javascript, mais tu as fais une erreur en ajoutant un évènement de clique sur le body, mais a chaque clique sur la page du déclenche l’événement, je l'ai mis en commentaire et ça fait très long temps où on a pas besoin de faire $.dcument.ready, le "$(" suffit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
$(function() {
    $('#add_address').click(function(event) {
         var lastDiv = $('#list > div').last();
         id = parseInt(lastDiv.attr("id")) + 1;
 
        (lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".remove").show();
 
        return false;
    });
//    $('body').on('click', '.remove', function(event) {
//        $(this).parent().parent().remove();
//        return false;
//    })
$("#btn_form").click(function() {
 
var data=$("form").serialize();
console.log("Tous les élément en une chaîne :", data);
 
        var tablData=$("form").serializeArray();
 
            //On affiche sur la console tous les éléments élément par élément
            //le premier element du tableau contient le nom
        console.log(tablData[0].name+" = "+tablData[0].value);
 
 
             //on a 3 champs pour chaque adresse
        var i,j,nbr_adresses=(tablData.length-1)/3;
 
    for(i=0; i<nbr_adresses; i++){
 
                console.log((i+1)+"e adresse");
 
           for(j=i*3+1;j<=3*i+3;j++){
 
 
                console.log(tablData[j].name+" = "+tablData[j].value);
           }
        }
        $.ajax({
            // Ajout des données
        });
        return false;
    });
 
});

Tu peux aussi utiliser la méthode directe qui te permettrais aussi d'avoir accès aux champs sans passer par la sérialisation, seulement à vu de tes ajout dynamiques déjà il y a une erreur due à la duplication des id, et aussi des noms de champs qui se dupliquent sans changement. Alors, si tu veux prendre les éléments facilement et en même temps renommer les champs si tu veux, avec toujours l'idée de passer par les nom des champs, alors j'ai écris quelques lignes de code qui permettra d'aller droit au but:

Voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $("#btn_form").click(function() { var tablData=[]; $( ".address" ).each(function( i ) { var ligneAdr={}; ligneAdr["mail"+i]= $(this).find('[name="mail"]').val(); ligneAdr["type"+i]= $(this).find('[name="type"]').val(); ligneAdr["commentaire"+i]= $(this).find('[name="commentaire"]').val(); tablData.push(ligneAdr); }); var datajson=JSON.stringify(tablData); console.log(datajson); $.ajax({ // Ajout des données }); return false; }); });
Citation:

Envoyé par jeyGey

Et pourquoi il ne faut pas utiliser $('form').submit ?

Il faut bien comprendre le comportement de cette méthode, qui signifie plusieurs choses selon l'objet sur lequel il est enregistré et la présence ou non de corps pour la méthode.

En lisant ton code au début tu as écris ça $('#form').submit(....) , et j'ai cru comprendre que tu enregistres un événement au bouton de type submit, qui permet de soumettre le formulaire, ce qui est une erreur grave, car c'est comme si tu met un callback après submit, qui n'a pas de sens, tu allais perdre tous tes données avant que tes scripts javascript soient exécutés car le submit actualise la page. Déjà,toi tu n'a pas besoin de faire une soumission.

D'autre part un $('form').submit() sur le formulaire lui même mais sans paramètre(sans fonction de à exécuter après l’événement) consiste à soumettre le formulaire manuellement via un script même si l'utilisateur n'a pas cliqué sur le bouton de soumission.

Alors, le seul cas délicat, c'est lorsqu'on enregistre un événement de type submit sur un formulaire lui même $('form').submit(function(){}), la première des choses, ça désactive l'action de soumission du formulaire une fois l'utilisateur a cliquer sur le bouton de type submit, alors même si tu met une action et un bouton de type submit ils n'ont pas de sens car le formulaire ne sera pas soumit, le seul événement qui sera traité c'est ce que tu as enregistrer à l’événement onSubmit. Tu peux faire une soumission manuel comme j'ai dis si tu veux

Merci beaucoup pour toutes t'es explications !! Franchement rien à redire :D

J'ai résolu mon problème j'ai utilisé la dernière solution et pas la sérialisation car il faut faire un peu plus de traitement et je veux que mon code reste clair un minimun.

J'ai modifier le bouton pour supprimer les adresses, je n'utilise plus $('body').click...

Je poste mon code pour ce que sa peut aider, si tu trouve des choses qui ne vont pas n'hésite pas :)

Et dernière question, comment remettre l'input à vide lorsque j'ajoute une adresse j'ai essayer .val(''); mais ça ne fonctionne pas.

Merci.

add.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form id="form">
	<fieldset class="frame">
		<legend class="title">Description</legend>
		<label for="name">Nom :</label>
		<input id="name" name="name" type="text" style="width:400px;" required />
	</fieldset>
	<fieldset class="frame">
		<legend class="title">Adresses</legend>
		<div id="list">
		****<div class="address one_line" id="1">
				<div class="cell">
					<label for="mail">Groupe / Mail :</label>
					<input id="mail" name="mail" type="text" style="width:300px;" />
				</div>
				<div class="cell">
					<label for="type">Type :</label>
					<select id="type" name="type">
						<option value="a" selected>A</option>
						<option value="cc">Cc</option>
						<option value="cci">Cci</option>
					</select>
				</div>
				<div class="cell">
					<label for="comment">Commentaire :</label>
					<textarea id="comment" name="comment" cols="50" rows="1"></textarea>
				</div>
				<div class="cell">
					<a href="#" class="remove align" style="display:none;">&times;</a>
				</div>
		****</div>
		</div>
		<input class="button align" id="add_address" type="button" value="Ajouter" />
	</fieldset>
	<input class="button" id="submit" type="submit" value="Ajouter" />
	<input class="button" id="back" type="button" value="Retour" />
</form>

Code:

1
2
3
$(document).ready(function() {
	$.getScript('js/directory/add.js');
});

add.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function() {
	$('#add_address').click(function(event) {
		var lastDiv = $('#list > div').last();
		var id = parseInt(lastDiv.attr('id')) + 1;
		(lastDiv.clone(true).attr('id', id)).insertAfter(lastDiv).find('.remove').show();
		return false;
	});
	$('.remove').click(function(event) {
		$(this).parent().parent().remove();
        return false;
    });
	$("#submit").click(function() {
		var name = $('#name').val();
		var i = 0;
		var address = [];
		$('.address').each(function(i) {
			var row = {};
			row['mail'] = $(this).find('[name="mail"]').val();
			row['type'] = $(this).find('[name="type"]').val();
			row['comment'] = $(this).find('[name="comment"]').val();
			if (row['mail']) {
				address.push(row);
			}
		});
		$.ajax({
			url: 'src/directory/add_req.php',
			dataType: 'json',
			data: {
				'name': name,
				'bilingual': bilingual,
				'exclusive': exclusive,
				'role': role,
				'instruction': instruction,
				'address': address
			},
			success: function(data) {
				$('#content').load('src/directory/index.php');
			}
		});
		return false;
	});
	$('#back').click(function() {
		$('#content').load('src/directory/index.php');
		return false;
	});
});

add_req.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
include_once('../../lib/string.php');
require_once('../../db/connection.php');
$req = $db->prepare('
	INSERT INTO mailinglist(
		name
	)
	VALUES(
		:name
	)
');
$req->execute(array(
	'name' => write_string($_GET['name']),
));
$req->closeCursor();
 
$mailinglist_id = $db->lastInsertId();
$req = $db->prepare('
	INSERT INTO address(
		mailinglist_id,
		mail,
		type,
		comment
	)
	VALUES(
		:mailinglist_id,
		:mail,
		:type,
		:comment
	)
');
foreach ($_GET['address'] as $row) {
	$mail = write_string($row['mail']);
	$type = write_string($row['type']);
	$comment = write_string($row['comment']);
	$req->bindParam(':mailinglist_id', $mailinglist_id);
	$req->bindParam(':mail', $mail);
	$req->bindParam(':type', $type);
	$req->bindParam(':comment', $comment);
	$req->execute();
}
$req->closeCursor();
?>

17/03/2014, 17h03
la.lune
Non, la méthode .val() doit marcher à moins que tu as dupliqué les ids et tu accède à l’élément par id, alors seul le premier sera modifié. Mais si tu utilise des classes tous les éléments auront la valeur voulut
Code:

1 2 $('#id').val("");//Pour une seule cible $('.classe').val("")//Pour plusieurs cibles
18/03/2014, 11h53
jeyGey

Ok mais dans mon exemple je fais comment ? car j'en ai plusieurs soit sa supprime tout, soit rien ne change.

Tu peux faire ceci dans la méthode de click de btn_adresse, vu que tu incrémente l'id du div conteneur, tu va compléter avec le reste des chmaps:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('#add_address').click(function(event) {        
        var lastDiv = $('#list > div').last();
        var id = parseInt(lastDiv.attr('id')) + 1;
        (lastDiv.clone(true).attr('id', id))
                                    .insertAfter(lastDiv)
                                    .find('.remove').show();
 
                $("#"+id).find("input[name='mail']")
                         .val("")
                         .attr("id","mail"+$(this).id);
        return false;
    });

Merci.

c'est super ^^

Code:

1
2
3
 
$('#' + id).find('input[name="mail"]').val('').attr('id', 'mail' + $(this).id);
$('#' + id).find('textarea[name="comment"]').val('').attr('id', 'comment' + $(this).id);

J'ai rajouté la deuxième ligne pour IE.

18/03/2014, 16h08
la.lune

Désolé, enlève le $(this).id je me suis trompé, il faut garder juste id, la variable que tu as crée que tu incrémente l'id:
Il faut que ça soit comme ça:

Code:

$('#' + id).find('input[name="mail"]').val('').attr('id', 'mail' + id);

$(this).id représente l'id du bouton ajouteur