Récupérer des champs créer dynamiquement

Version imprimable

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:

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.

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

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

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
 
 
<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 :ccool:)

Super merci cela a fonctionné :ccool:

Voilà ce que ça donne :
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 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.

Je ferais un truc comme ça :
Code:

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)

16/08/2010, 10h36
dam28800
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:

1 2 $("#panier1").hide().append(data).slideDown();
Merci d'avance.

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:

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:

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:

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

19/08/2010, 10h36
dam28800

Merci ça fonctionne !