Comment soumettre les données du formulaire sur lequel on clique ?

**jamjam100** · 26/10/2012, 11h53

Hello,

Je souhaiterais soumettre les données d'un seul formulaire parmi plusieurs via jQuery/Ajax. J'affiche plusieurs formulaires (+ 1 bouton par formulaire).

Le problème, c'est que seules les données du 1er formulaire sont soumises.

Je souhaite que seules les données du formulaire sur lequel je clique sont soumises.

Merci pour votre aide !

// code jQuery/Ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        var lolo = $('.myFormClass').attr('id');
 
        $("#"+lolo).submit(function() {
				var gidval = $("#gid").val();
				var prenomval = $("#prenom").val();
				var nomval = $("#nom").val();
				var emailval = $("#email").val();
				$.post("processing.php", { gid: gidval, prenom: prenomval,
				nom: nomval, email: emailval }, function(data) {
					$(".share p").html(data);
				});
 
				return false;
			});

// boucle PHP qui affiche plusieurs formulaires (+ 1 bouton par formulaire)

Code php :

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
    <?php
 
    while($result = mysql_fetch_assoc($requete)) {
 
    echo '<form id="';
    echo $row['resp_ID'];
    echo '" class="myFormClass" method="post"><input type="hidden" id="gid" value="';
    echo $row['resp_ID'];
    echo '" /><p>Prénom: <input type="text" id="prenom" /></p>
	    <p>Nom: <input type="text" id="nom" /></p>
	    <p>Email: <input type="text" id="email" /></p>
	    <p><input type="submit" value="Envoyer" /></p>
	    </form>
	    <div id="';
        echo $row['resp_ID'];
        echo '" class="share">
	    <p></p>
	    </div>';
    }
 
    ?>

**Bovino** · 26/10/2012, 12h05

Il faut déjà respecter une règle de base en HTML : un id doit être unique dans une page !!!

**jamjam100** · 26/10/2012, 12h28

Merci Bovino.

J'ai corrigé les ID pour qu'ils soient uniques.

Le problème, c'est que le code jQuery ne répond pas ;-(

**Bovino** · 26/10/2012, 12h38

Oui, c'est un peu normal en fait...

Code :

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

var lolo = $('.myFormClass').attr('id');

dans ce code, $('.myFormClass') récupère tous les éléments ayant la classe myFormClass, mais .attr('id') ne renvoie l'id que du premier élément de la collection.

Ceci dit, tu te compliques les choses inutilement, appliquer un gestionnaire à une collection permet à l'événement d'être appliqué cet événement à tous les éléments de la collection !

Code :

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

$('.myFormClass').submit(function() {...});

est donc largement suffisant.

Et sans vouloir être méchant, ça ce sont les bases de jQuery...

**jamjam100** · 26/10/2012, 12h59

Merci encore pour tes conseils.

J'ai fait évoluer le code jQuery mais toujours rien... ;-(

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(.myFormClass).submit(function() {
				var id = $(.myFormClass).find(".id");
				var gidval = $("#gid"+id).val();
				var prenomval = $("#prenom"+id).val();
				var nomval = $("#nom"+id).val();
				var emailval = $("#email"+id).val();
				$.post("processing.php", { gid: gidval, prenom: prenomval,
				nom: nomval, email: emailval }, function(data) {
					$(".share p").html(data);
				});
 
				return false;
			});

**Bovino** · 26/10/2012, 14h00

Malheureusement, tu ne sembles pas comprendre ce que tu fais...

Code :

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

var id = $(.myFormClass).find(".id");

Cette ligne ne correspond à rien.
$(.myFormClass) servirait à rappeler une variable nommée .myFormClass, ce qui n'a pas de sens puisque commençant par un point qui sert en JavaScript à appeler une propriété ou une méthode d'objet (qui n'est pas renseigné).
Quand bien même tu aurais juste oublié de l'entourer de quotes, ça ne serait pas plus utile puisque tu rappellerais l'ensemble de tes formulaires et l'instruction suivante réduirait cette sélection au premier élément. Il faut utiliser this, qui correspond à l'élément HTML cliqué (voire $(this), l'objet jQuery correspondant).
.find(".id") signifie rechercher parmi les éléments enfants de ceux récupérés juste avant ceux ayant une classe "id" : ce n'est pas à priori ce que tu souhaites.

Code :

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

var id = this.id;

est largement suffisant pour ce que tu veux faire !

Mais encore une fois, tu ferais quand même mieux d'apprendre jQuery avant de l'utiliser...

**jamjam100** · 26/10/2012, 19h32

J'ai testé le code simplifié suivant. Mais ça ne fonctionne pas

fichier forms.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>
		Test formulaires
	</title>
 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
	<script type="text/javascript">
 
		$(document).ready(function() {
 
		$('form.myFormClass').on('submit', function(){
			var id = this.id;
			var gidval = $("input[id^=gid]", this).val();
			var prenom = $("input[id^=prenom]", this).val();
			var nom = $("input[id^=nom]", this).val();
			var email = $("input[id^=email]", this).val();
				$.post("processing.php", { id: id, gid: gidval, prenom: prenomval,
				nom: nomval, email: emailval }, function(data) {
				$("#share p").html(data);
				});
			return false;
			});
 
		});
 
	</script>
 
</head>
 
<body>
	Formulaire 1234
	<form id="1234" class="myFormClass" method="post">
		<input type="hidden" id="gid_1234" class="gid" value="1234" />
		<p>Prénom: <input type="text" id="prenom_1234" class="prenom"/></p>
		<p>Nom: <input type="text" id="nom_1234" class="nom"/></p>
		<p>Email: <input type="text" id="email_1234" class="email"/></p>
		<p><input type="submit" value="Envoyer" /></p>
	</form>
 
	Formulaire 9876
	<form id="9876" class="myFormClass" method="post">
		<input type="hidden" id="gid_9876" class="gid" value="9876" />
		<p>Prénom: <input type="text" id="prenom_9876" class="prenom"/></p>
		<p>Nom: <input type="text" id="nom_9876" class="nom"/></p>
		<p>Email: <input type="text" id="email_9876" class="email"/></p>
		<p><input type="submit" value="Envoyer" /></p>
	</form>		
 
	<div id="share">
		<p>résultat ici</p>
	</div>
</body>
 
</html>

fichier processing.php

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
 
 
<?php
 
$id = $_POST['id'];
 
$gid = 'gid_';
$gid .= $id;
 
$prenom = 'prenom_';
$prenom .= $id;
 
$nom = 'nom_';
$nom .= $id;
 
$email = 'email_';
$email .= $id;
 
echo $_POST[$gid];
echo '<br/>';
echo $_POST[$prenom];
echo '<br/>';
echo $_POST[$nom];
echo '<br/>';
echo $_POST[$email];
echo '<br/>';
 
?>

**Bovino** · 26/10/2012, 19h38

Tu ne remarques pas que les noms de variables que tu définis sont différents de ceux utilisés dans data ?

C'est comme dans la vie : si tu appelles ta femme par le prénom de ta maitresse, il y a de fortes chances que ça se passe mal !

**jamjam100** · 26/10/2012, 20h21

Merci pour ton aide

Voici le code qui fonctionne. ça peut toujours servir :

fichier forms.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>
		Test formulaires
	</title>
 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
	<script type="text/javascript">
 
		$(document).ready(function() {
 
		$('form.myFormClass').on('submit', function(){
			var id = this.id;
			var gidval = $("input[id^=gid_"+id+"]", this).val();
			var prenomval = $("input[id^=prenom_"+id+"]", this).val();
			var nomval = $("input[id^=nom_"+id+"]", this).val();
			var emailval = $("input[id^=email_"+id+"]", this).val();
				$.post("processing.php", { id: id, gid: gidval, prenom: prenomval,
				nom: nomval, email: emailval }, function(data) {
				$("#share p").html(data);
				});
			return false;
			});
 
		});
 
	</script>
 
</head>
 
<body>
	Formulaire 1234
	<form id="1234" class="myFormClass" method="post">
		<input type="hidden" id="gid_1234" class="gid" value="1234" />
		<p>Prénom: <input type="text" id="prenom_1234" class="prenom"/></p>
		<p>Nom: <input type="text" id="nom_1234" class="nom"/></p>
		<p>Email: <input type="text" id="email_1234" class="email"/></p>
		<p><input type="submit" value="Envoyer" /></p>
	</form>
 
	Formulaire 9876
	<form id="9876" class="myFormClass" method="post">
		<input type="hidden" id="gid_9876" class="gid" value="9876" />
		<p>Prénom: <input type="text" id="prenom_9876" class="prenom"/></p>
		<p>Nom: <input type="text" id="nom_9876" class="nom"/></p>
		<p>Email: <input type="text" id="email_9876" class="email"/></p>
		<p><input type="submit" value="Envoyer" /></p>
	</form>		
 
	<div id="share">
		<p>résultat ici</p>
	</div>
</body>
 
</html>

fichier processing.php

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
 
<?php
 
echo 'ID : ';
echo $_POST['id'];
echo '<br/>';
 
echo 'Prenom : ';
echo $_POST['prenom'];
echo '<br/>';
 
echo 'Nom : ';
echo $_POST['nom'];
echo '<br/>';
 
echo 'Email : ';
echo $_POST['email'];
echo '<br/>';
 
?>

Comment soumettre les données du formulaire sur lequel on clique ?

jQuery

Discussions similaires

Partager

Partager