Discussion :

[jeyGey]

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 html :

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

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 :

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

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

[danielhagnoul]

Bonsoir

Code JS :

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

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 HTML :

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

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>

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

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

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

[jeyGey]

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 html :

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

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 :

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

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 ?