Récupérer des champs créer dynamiquement

**dam28800** · 12/08/2010, 10h39

Bonjour à tous,

J'ai une liste de produit avec un champ text qui me permet de saisir la quantité.
J'ai un boutton pour chaque ligne de produit et je souhaiterai enregistrer la quantité qui correspond au bouton dans ma base de donnée.

J'ai adapté une source sur le web et cela fonctionne pour un champ créer statiquement mais je ne sais pas comment récupérer les valeurs avec les champs créer dynamiquement.

Voilà la fonction 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
15
16
17
18
19
20
21
22
23
 
$(function(){
 
		   $("#formcom").submit(function(){
									$("#loader").show();	
 
										quantite = $(this).find("input[name=quantite1]").val();
 
										$.post("add.php",{quantite: quantite}, function(data){
										$("#loader").hide();	
										if(data!="ok"){
											$(".error").empty().append(data + "<br>");	
										}
										else {
										$("#resultat").hide().append(quantite).slideDown();
										$("#forcom").fadeOut();
										}
										});
 
										return false;
										});
 
		   });

J'avais pensé récupérer la valeur du boutton qui correspondrait à la valeur du champ^mais je ne vois pas trop...

Merci d'avance de votre aide.

**llaffont** · 12/08/2010, 11h50

Je te conseil de mettre chaque Select, Input et button dans un DIV.

Voilà un exemple : (C'est pas propre mais cela fonctionne.)

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
 
 
<html>
<head>
 
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 
function recupVal(bouton){
var div = $(bouton).parent(); //On récupère le conteneur
var selectVal = $(div).children('select').val(); // la valeur du Select
var inputVal = $(div).children('input').val(); // la valeur du input
 
alert (selectVal + inputVal);
}
</script>
 
</head>
<body>
<div style="border:1px solid;">
<select class="Groupe" size="1">
	<option value="0">Sélectionner ...</option>
	<option value="1">Groupe 1</option>
	<option value="2">Groupe 2</option>
</select>
<input type="text">
<input type="button" name="toto" value="enregistrer" onClick="recupVal(this)">
</div> 
<br>
<div style="border:1px solid;">
<select class="Groupe" size="1">
	<option value="0">Sélectionner ...</option>
	<option value="1">Groupe 1</option>
	<option value="2">Groupe 2</option>
</select>
<input type="text">
<input type="button" name="toto" value="enregistrer" onClick="recupVal(this)">
</div> 
<br>
<div style="border:1px solid;">
<select class="Groupe" size="1">
	<option value="0">Sélectionner ...</option>
	<option value="1">Groupe 1</option>
	<option value="2">Groupe 2</option>
	<option value="2">Groupe 3</option>
</select>
<input type="text">
<input type="button" name="toto" value="enregistrer" onClick="recupVal(this)">
</div> 
</body>
</html>

comme tu isole tes données individuellement il ne te reste plus que faire un push en BDD (là c'est à toi de jouer

)

**dam28800** · 12/08/2010, 15h17

Super merci cela a fonctionné

Voilà ce que ça donne :

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
 
function recupVal(bouton){
var div = $(bouton).parent(); 
var quantite = $(div).children('input[type=text]').val(); // la valeur du input
var article = $(div).children('input[type=hidden]').val(); // la valeur du input
var total = $(div).children('input[name=total]').val(); // la valeur du input
var totalg = parseInt(total)+parseInt(quantite);
//alert (quantite + " : " + article);
$("#loader").show();
$.post("add.php",{quantite: quantite, article: article}, function(data){
	$("#loader").hide();	
	if(data!="ok"){
		$(".error").empty().append(data + "<br>");	
	}
	else {
			$("#panier").hide();
				//$(".error").empty().append(data + "<br>");	
			$("#panier_ajax").hide().append("Total Panier : " + totalg).slideDown();
			//$("#forcom").fadeOut();
		}
 
	//alert (data);
	});
return false;
}

J'ai une dernière petite question, en fait je souhaite afficher le total du panier.
J'ai créer un div panier_ajax qui s'affiche mais le problème est que cela me crée plusieurs lignes, si j'ajout plusieurs produits.

J'ai essayé de mettre un empty() mais là il le vide et n'ajoute que la dernière quantité.

La meilleur méthode serait peut être d'aller de faire une requête dans ma fonction pour aller chercher la somme qui est stocker dans ma table mysql (enfin calculé)

Merci d'avance de ton aide.

**llaffont** · 12/08/2010, 16h05

Je ferais un truc comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
 
function SommeTotal(quantite){
var ValPrecedente =  $('input[name=total]').val();
if (ValPrecedente!=""){
var quantite= (parseInt(ValPrecedente)+parseInt(quantite));
}
$('input[name=total]').empty();
$('input[name=total]').val(quantite);
}

Que je lancerais après chaque appuis sur le bouton. (le gros défaut c'est que ce n'est que de l'ajout)

**dam28800** · 16/08/2010, 10h36

Oui effectivement ça fonctionne. Merci.

Mais peux t-on actualiser une requête après un enregistrement en ajax.
Je m'explique :

J'ajoute un produit a un panier.
Enregistrement dans ma table.
Affichage de la table à jour sans recharger la page.
Parce que la j'arrive juste à afficher une phrase ou le dernier résultat avec :

Code :

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

1
2
 
$("#panier1").hide().append(data).slideDown();

Merci d'avance.

**llaffont** · 16/08/2010, 12h17

Oui tu fais faire un retour à ta requête PHP.

Exemple :

Ta requête AJAX demande à un script PHP de faire l'enregistrement en BDD;

Code :

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

1
2
3
4
5
6
7
8
 
$.ajax({
  type: 'POST',
  url: tonscript.PHP,
  data: saveInBDD,
  success: success,
  dataType: JSON
});

Ton Script PHP est constitué comme suit : (Je synthétise un max)

Code :

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

1
2
3
4
5
6
7
8
 
function saveInBDD(){
 
$Sqlinput = "Input ....."
$RecupValBDD = "SELECT Val FROM BDD..."
 
echo '{"recupVal": "'.$RecupValBDD.'"}';
}

Et ensuite ta fonction JavaScript

Code :

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

1
2
3
4
5
6
function success(retourJSON){
 
$('input[name=total]').empty();
$('input[name=total]').val(retourJSON.recupVal);
 
}

**dam28800** · 19/08/2010, 10h36

Merci ça fonctionne !

Récupérer des champs créer dynamiquement

jQuery

Discussions similaires

Partager

Partager