11544 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment soumettre les données du formulaire sur lequel on cli

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 soient soumises.

Merci pour votre aide !

// code jQuery/Ajax

<script>
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;
});
</script>


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

<?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>';
}
?>
Bonjour,
dans ton html, tu as des id qui se répètent: id="gid" ... donc, quand tu écris:
var gidval = $("#gid").val();
... Quelle valeur est récupérée?
Crée des indexs uniques en concaténant par exemple l'id générique avec ton id que je suppose unique $row['resp_ID'] pour obtenir quelque chose du style gid_ $row['resp_ID'].
Ensuite, pour le js, tu crées un évènement pour tous les formulaires ($('form')) ou juste pour les formulaires qui ont la classe 'myFormClass' :
$('form.myFormClass').on('submit', function(){
  // récupération des valeurs dans le formulaire soumis.
  var gidval = $("input[id^=gid]", this).val();
  var prenomval = $("input[id^=prenom", this).val();
  ...
  $.post("processing.php", { gid: gidval, prenom: prenomval,
      nom: nomval, email: emailval }, function(data) {
      $(".share p").html(data);
  });
  return false;
})

Modifié par loicbcn (26 Oct 2012 - 12:09)
J'ai testé le code simplifié suivant. Mais ça ne fonctionne pas Smiley decu

fichier forms.php
<!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
<?php

<?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/>';

?>
Merci pour ton aide Smiley smile
Voici le code qui fonctionne. ça peut toujours servir :

fichier forms.php
<!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
<?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/>';

?>
Sujet clos
Aller à