Récupération des champs d'un formulaire dynamique

Résolu
Crabece Messages postés 2 Date d'inscription mardi 28 juin 2005 Statut Membre Dernière intervention 7 septembre 2008 - 5 sept. 2008 à 22:45
Crabece Messages postés 2 Date d'inscription mardi 28 juin 2005 Statut Membre Dernière intervention 7 septembre 2008 - 7 sept. 2008 à 06:39
Bonjour à tous,

Je vous expose mon problème en essayant d'etre le plus claire possible :

Je travaille actuellement sur un site de vente en ligne et mon problème survient lors de la consultation du panier.
En gros voici un exemple de code retourné par php :

<form id="form" name="panier">
<div id="un" class="listeproduits l">
<img src="images/produit.jpg" alt="exemple produit" />
<div class="apropos s">
<h2>Serpent et echelle mag.</h2>
<p>Colisage : <strong>48 par boite.</strong></p>
</div>
<div style="display: block; position: relative; float: left; margin: 10px 0 0 0;">
<input name="quantityUBON03830" type="text" style="width: 50px;" value="1" onchange="remplissage();"/>
</div>
<input style="display: block; position: relative; float: left; margin: 10px;" value="0" name="prixUBON03830">$</p>
<input style="display: block; position: relative; float: left; margin: 10px; font-weight: bold" value="0" name="subtotalUBON03830">$</p>
<div style="display: block; position: relative; float: right; margin: 10px 20px 0 0;">
<input type="checkbox" />
</div>
<span class="clear"></span>
</div>
<input type="hidden" value="UBON03830" name="id">

<div id="un" class="listeproduits l">
<img src="images/produit.jpg" alt="exemple produit" />
<div class="apropos s">
<h2>Puzzle cube 15 mcx. safari</h2>
<p>Colisage : <strong>24 par boite.</strong></p>
</div>
<div style="display: block; position: relative; float: left; margin: 10px 0 0 0;">
<input name="quantityPIKO04230" type="text" style="width: 50px;" value="1" onchange="remplissage();"
/>
</div>
<input style="display: block; position: relative; float: left; margin: 10px;" value="0" name="prixPIKO04230">$</p>
<input style="display: block; position: relative; float: left; margin: 10px; font-weight: bold" value="0" name="subtotalPIKO04230">$</p>
<div style="display: block; position: relative; float: right; margin: 10px 20px 0 0;">
<input type="checkbox" />
</div>
<span class="clear"></span>
</div>
<input type="hidden" value="PIKO04230" name="id">
[...]

</form>

Voici donc la description de mon problème :

En prennant un exemple concret, je souhaite via JS récuperer et manipuler les valeurs de chaque champs.
Par exemple lorsque l'on change la quantité :

        function remplissage(){
           
            var id = document.panier.id.value;
            var total = (document.panier.quantity+id.value * document.panier.prix+id.value);
            document.panier.subtotal+id.value = total;
var total2 = '';
for(i=0;i<nbChampsSubtotal;i++)                                                                                    // calculer les subtotaux de chaque produits
{
total2 += document.panier.subtotal+id.value;                                                                
}

            document.getElementById('resultat').innerHTML = total;                                           //champs en bas de page qui fait les resultat de chaque subtotal
        }

Bien sur le script ci-dessus ne marche pas à cause de la concatenation pour recuperer le nom de chaque champs, mais je pense que vous avez compris l'idée...

Je suis ouvert à toutes critiques / propositions

Merci de votre aide

2 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 sept. 2008 à 09:47
bonjour,

le plus "raisonnable" serait de changer les name.

quel que soit le langage pas simple de gérer des "variables" du style nom??? ou ?? est inconnu.

je te dirais bien de mettre des id "évolutifs" style qte1, pri1, qte2, pri2....
mais ça ne changerais rien coté serveurn où tu auras les mêmes soucis :
comment gérer $_POST['quantity????on_ne_connait_aps_la_suite???']

je te propose plutôt :

<form name="frm">
       

for ( var n=0; n< document.frm["qte[]"].length; n++ )
{   traitement de document.frm["qte[]"][n] et de document.frm["pri[]"][n] ... }

et coté php, $_POST['qte'] et $_POST['pri'] sont des Array

si tu n'a pas le choix, mais il vaudrait mieux !!!!
tu peux utilsier :

    for ( n=0;n<frm.elements.length;n++)
   {    if (frm.elements[n].type=="text")
      {    si le name est du style "quantity123456789", en tirer le 123456789
               pour en déduire prix123456789    }   
    }
   même punition coté php

Cordialement     Bul  [mon Site] [M'écrire], <!--
3
Crabece Messages postés 2 Date d'inscription mardi 28 juin 2005 Statut Membre Dernière intervention 7 septembre 2008
7 sept. 2008 à 06:39
Merci bien pour ton aide,

Pour ceux que ca interesserai, j'ai opté pour la 2ème solution en incrementant une variable a chaque champs:

        function remplissage(){
            var nbchampstexteparproduit = 5;
            var prix = '';
            var qte = '';
            var total = new Number();
           
            for ( var n=0; n< document.panier.elements.length; n++ ){
                                if(document.panier.elements[n].name=="q"+(n/nbchampstexteparproduit)){
                                qte = document.panier.elements[n].value;
                                }
                                if(document.panier.elements[n].name=="p"+((n-1)/nbchampstexteparproduit)){
                                    //alert('fuck!!'+n);
                                prix = document.panier.elements[n].value;
                                document.getElementById('stt'+(n-1)/nbchampstexteparproduit).value = qte*prix;
                                document.getElementById('stt'+(n-1)/nbchampstexteparproduit).innerHTML = document.getElementById('stt'+(n-1)/nbchampstexteparproduit).value;
                               
                                total += qte*prix;
                                document.panier.elements[n+1].value = qte*prix;

                                //document.getElementById('stt'+(n-1)/nbchampstexteparproduit)).innerHTML = qte*prix;

                                }
                               
                                //document.getElementById("st"+(n-2)/nbchampstexteparproduit)).value = qte * prix;
                   
            }
            document.getElementById('resultat').innerHTML = total;
        }

et dans PHP apres le POST:

                            $arrid = array();
                            foreach($_POST as $key=>$value){
                                if($_POST[$key] == 'on'){
                                    $arrid[] .= substr($key, -1);
                                }
                            }
                            $arrproduits =array();
                            foreach($arrid as $k=>$v){
                                $arrproduits[] .= $_POST['id'.$v];
                            }

                            foreach($arrproduits as $k=>$v){
                                echo "vous avez acheté les produits".$v."
";
                            }

Ca fait un peu barbar la recupération des elements comme ca, mais comme mon nombre de champs est fixe, ca marche et tant mieu :)

Au plaisir !
0
Rejoignez-nous