Discussion :

[yozart]

Bonjour,

J'ai une page web dans laquelle j'ai une liste de personnes. Cette liste est dynamique (le nombre de personnes est sensible de varier).

https://jsfiddle.net/cx8hutvx/

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
                                          <form id="mainForm" action="">
						<div class="contact-form bottom">
							<div id="lstPersons" name="lstPersons">
								<div class="row person" id="person0" name="person">
									<div class="col-md-3  col-sm-12">
										<select class="form-control" id="cat0" name="cat">
										  <option value="A" selected>Adulte</option>
										  <option value="E">Enfant</option>
										  <option value="B">B&eacute;b&eacute;</option>
										</select>
									</div>
									<div class="col-md-3  col-sm-12">
										<input type="text" id="prenom0" class="form-control firstname" required placeholder="Prénom" name="prenom" />
									</div>
									<div class="col-md-3  col-sm-12">
										<input type="text" id="nom0" class="form-control lastname" required placeholder="Nom" name="nom" />
									</div>
									<div class="col-md-2  col-sm-12">
										<input type="text" name="allergies" class="form-control allergies" placeholder="Allergies..."  id="allergies0"/>
									</div>
									<div class="col-md-1  col-sm-12">
									</div>
								</div>
                                                                <div class="row person" id="person1" name="person">
									<div class="col-md-3  col-sm-12">
										<select class="form-control" id="cat1" name="cat">
										  <option value="A" selected>Adulte</option>
										  <option value="E">Enfant</option>
										  <option value="B">B&eacute;b&eacute;</option>
										</select>
									</div>
									<div class="col-md-3  col-sm-12">
										<input type="text" id="prenom1" class="form-control firstname" required placeholder="Prénom" name="prenom" />
									</div>
									<div class="col-md-3  col-sm-12">
										<input type="text" id="nom1" class="form-control lastname" required placeholder="Nom" name="nom" />
									</div>
									<div class="col-md-2  col-sm-12">
										<input type="text" name="allergies" class="form-control allergies" placeholder="Allergies..."  id="allergies1"/>
									</div>
									<div class="col-md-1  col-sm-12">
									</div>
								</div>
							</div>
 
                                                        <div class="row" style="margin-top:2em;">
								<div class="col-sm-12 text-centered">
									<button class="btn btn-success text-centered" type="button" id="btn-confirm">
									 <span class="badge"><span class="glyphicon glyphicon-send" aria-hidden="true"></span></span> Envoyer ma réponse
									</button>
								</div>
							</div>
                                                    </div>
                                                </form>

Le code suivant me retourne juste une liste de valeurs contenant plusieurs prenoms, plusieurs nom,...

Code :

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

console.log($('#mainForm').serializeArray());

exemple : [[name:cat;value:A],[name:prenom;value:AAA],[name:nom;value:AAA],[name:allergies;value:],[name:cat;value:A],[name:prenom;value:BBB],[name:nom;value:BBB],.......]


une idée de comment obtenir:

Code :

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

1
2
3
4
5
[ 
    [name:person; value: [[name:cat;value:A],[name:prenom;value:AAA],[name:nom;value:AAA]]],
    [name:person; value: [[name:cat;value:A],[name:prenom;value:BBB],[name:nom;value:BBB]]],
    ....
]

[SpaceFrog]

coder toi même ton serialize en scannant les éléments du form pour construire toi meme la structure d'Array qui te convient ...

[yozart]

Ok, c'est ce que je pensais faire au debut mais ca me semblait tellement basique que je me suis dit "cela doit deja exister". A priori non ^^. Merci pour l'info

[yozart]

Pour ceux que ca interesse:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var lstpersons = [];
 
	var $this, input, text, obj;
	$('.person').each(function() { 
	   $this = $(this);
	   obj = {};
	   obj["cat"] = $this.find(".cat").val();
	   obj["firstname"] = $this.find(".firstname").val();
	   obj["lastname"] = $this.find(".lastname").val();
	   obj["allergies"] = $this.find(".allergies").val();
	   lstpersons.push(obj);
 
	});

J'ai mis a jour le fiddle si vous voulez tester.