Serialize un formulaire en objets

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:

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:

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:

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]]],
    ....
]

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

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

Pour ceux que ca interesse:

Code:

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.