Débutant. Récupérer les valeurs d'un formulaire dans le cas de formulaires multiples par page

**kgb93** · 28/04/2010, 20h45

Bonjour,

je fais appel à votre aide sur un détail qui est en train de me rendre plus chauve que je ne le suis déjà. Je suis en phase d'apprivoisement du javascript et même de jQuery, mais là, je n'ai pas trouvé sur les forums réponse à ma question.

Background.

J'ai, sur ma page, plusieurs petits formulaires chacun avec un id différent. En fait, j'ajoute au radical de l'ID une variable qui s'incrémente. Ce qui donne dans le code (dépouillé de ce qui nuirait à la visibilité) :

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
 
<div class="blocGroup"> 
	<form id="qualif1"> 
		<input type="hidden" value="1" name="Hidden1" />
		<table> 
			<tbody> 
				<tr>GROUPE A</td></tr> 
...
...
				<tr>
					<td><input type="submit" value="Modifier" /></td>
				</tr> 
			</tbody> 
		</table> 
	</form> 
</div> 
 
<div class="blocGroup"> 
	<form id="qualif2"> 
		<input type="hidden" value="2" name="Hidden1" />
		<table> 
			<tbody> 
				<tr>GROUPE B</td></tr> 
...
...
				<tr>
					<td><input type="submit" value="Modifier" /></td>
				</tr> 
			</tbody> 
		</table> 
	</form> 
</div>

Ce qui donne, une fois rendu par un navigateur, ceci :

Ma question :

Que dois-je mettre, dans mon js, dans la variable i pour que je puisse récupérer les champs du formulaire correspondant au bouton que j'ai cliqué?
L'idéal serait que je récupère la valeur de mon input caché, mais je n'arrive qu'à prendre la valeur du premier de la page.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready( function () {
                var i = ???
                $("#qualif"+i.submit( function() {	
                    var str = $("#qualif"+i.serialize();
                    alert(str);
 
 
 
                    return false; 
                });
            });

Ou alors il y a peut-être une autre piste que je n'ai pas exploré. Dans ce cas, je vous remercierai de m'indiquer une piste.

Par la suite, j'envisage d'alimenter/modifier la base de données par Ajax. Mais là, c'est un autre problème, bien que j'ai des pistes sérieuses la dessus.

Je vous remercie d'avance, et j'attends votre aide.

**danielhagnoul** · 29/04/2010, 23h38

Bonsoir.

Exemple :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
 
			// pour tout id débutant par 'qualif'
			$("[id^='qualif']").submit(function(){
				var boolOK = true; // si true le formulaire est soumis, si false il ne l'est pas
 
				// tester la validité du formulaire
				if (false){ // remplacer false par un condition de test
					boolOK = false;
				} else { // si le formulaire est correct
					alert($(this).serialize());
				}
 
				return boolOK; // si true le formulaire est soumis, si false il ne l'est pas
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<form id="qualif1" action=""> <!-- dans action, le nom du fichier php qui va traiter la requête -->
			<input type="hidden" name="Hidden1" value="1" />
			<input type="text" name="nom"/>
			<input type="submit"/>
		</form> 
		<form id="qualif2" action=""> 
			<input type="hidden" name="Hidden1" value="2" />
			<input type="text" name="nom"/>
			<input type="submit"/>
		</form> 
		<form id="qualif3" action=""> 
			<input type="hidden" name="Hidden1" value="3" />
			<input type="text" name="nom"/>
			<input type="submit"/>
		</form> 
 
	</div>
</body>  
</html>

**kgb93** · 30/04/2010, 16h11

Merci énormément danielhagnoul...

Ca fait exactement ce que je veux.

Je passe le sujet en résolu.

**danielhagnoul** · 01/05/2010, 00h51

Bonsoir.

Félicitations pour le fond et la forme de votre question. Un titre clair, un message structuré, des phrases bien construites. Un problème bien posé. On a envie de vous aider. J'exprime le voeu que de nombreux forumeurs prennent exemple sur ce message.

Débutant. Récupérer les valeurs d'un formulaire dans le cas de formulaires multiples par page

jQuery

Vue hybride

Discussions similaires

Partager

Partager