Ajout ligne de calcul. Perte de données (hinner HTML)

ctofff · 10 Mars 2015

Bonjour à tous,
nouveau sur le forum que j'écume depuis quelques jours, je vous livre mon souci.

Attention, je suis débutant en javascript. Merci de votre compréhension. Donc voici ce que je cherche à faire :

Je souhaiterai mettre à disposition dans un formulaire un bouton ajoutant des lignes de calcul dont le les résultats seraient additionnés dans le principe d'un devis, facture ou panier. Pour le moment j'en suis seulement à l'ajout de ligne, je bosserai l'addition et la récupération des valeurs ensuite.

J'ai péché sur le web et aussi sur ce forum différents bouts de scripts que je tente de mettre à ma sauce dont celui-ci : https://www.webrankinfo.com/forum/aide-ajout-champs-javascript-t160283.html

Code:

<script type="text/javascript">
    var nlignes = 0;
    function Ajouter(){
       nlignes++;
       var obj = document.getElementById('saisies');
	  
       obj.innerHTML = obj.innerHTML +'<div id="champ'+nlignes+'"> Produit '+nlignes+' <input type="text" size="4" id="P'+nlignes+'" name="P'+nlignes+'" value="" />  Quantité '+nlignes+' <input type="text" id="QT'+nlignes+'" name="QT'+nlignes+'" value=""/> <input style="width:10%;" id="calc'+nlignes+'" name="calc'+nlignes+'" type="button" value="calculer" onClick="window.document.getElementById(\'output'+nlignes+'\' ).value = window.document.getElementById(\'P'+nlignes+'\').value  * window.document.getElementById(\'QT'+nlignes+'\').value;"/> Somme'+nlignes+' <input type="text" id="output'+nlignes+'" name="output'+nlignes+'" value=""/><input type="button" value="supprimer" onclick="document.getElementById(\'saisies\').removeChild(document.getElementById(\'champ'+nlignes+'\'));";" /></div>';
	   
 }
</script>

   <Form>
    <Input Type="Button" Value="Ajout ligne" OnClick="Ajouter();">
    <br>
    <div id="saisies"></div>
 </Form>

Certes pour le puriste je suis loin du tout beau tout propre. Mais pour le moment le calcule s’intègre et il est opérationnel à chaque ligne, sauf que....

Sauf que, à chaque ajout d'une ligne toutes les données s'effacent !!! J'imagine qu'il serait plus efficace de travailler avec la création d'une fonction calcul () mais si la créer me semble jouable, l'intégrer dans une boucle beaucoup moins (en tout cas pour le moment je sèche).

Voila je vous remercie par avance de vos conseils, liens, bref tout ce qui me permettrai d'avancer. Je suis plus php donc les neurones se touchent pour assimiler javascript sans confusion.

Belle journée à vous,

Christophe

loubet · 10 Mars 2015

ctofff a dit:
Sauf que, à chaque ajout d'une ligne toutes les données s'effacent !!!

j'ai copié / collé le code, et rien ne s'efface quand j'ajoute plusieurs lignes.

ctofff · 10 Mars 2015

loubet a dit:
j'ai copié / collé le code, et rien ne s'efface quand j'ajoute plusieurs lignes.

avec un mac sur firefox 36.0.1, chrome 33.0.1750.146, et safari 6.2.3 chaque nouvelle ligne tout s'efface !!!

idem sur http://www.w3schools.com

Je parle des valeurs entrées dans les cellules... Je précise car de fait j'ai un doute.

loubet · 10 Mars 2015

ok pour les valeurs des champs qui sont bien vidées, et c'est normal vu le code.
il faut utiliser http://www.w3schools.com/jsref/met_document_createelement.asp pour ajouter sans tout redéfinir.

ctofff · 10 Mars 2015

Merci Loubet, je vais explorer cette piste.

Yep, ça fait du bien un peu de vent dans les voiles

ctofff · 10 Mars 2015

J'en suis là, ça répond à la création des input etc..

maintenant je me demande comment créer la multiplication entre les 2 premières cellules pour avoir le résultat dans la dernière.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <script type='text/javascript'>
            function Count(obj) {
                if (! obj.data) obj.data = 0;
                obj.data++;
                var input = document.createElement('input');
input.id = 'id_long' + obj.data;
input.type="text";
input.value=" ";
input.name="long"+ obj.data;
                var input2 = document.createElement('input');
input2.id = 'id_larg' + obj.data;
input2.type="text";
input2.value=" ";
input2.name="larg"+ obj.data;   
                 var input3 = document.createElement('input');
input3.id = 'id_larg' + obj.data;
input3.type="text";
input3.value=" ";
input3.name="larg"+ obj.data;                         
               
                  var btn = document.createElement('BUTTON');
var t = document.createTextNode("Calcul"+ obj.data);       
btn.appendChild(t);                                
              
document.getElementById('containerDiv').appendChild(input);
document.getElementById('containerDiv').appendChild(input2);
document.getElementById('containerDiv').appendChild(btn);
document.getElementById('containerDiv').appendChild(input3);
            }
        </script>
    </head>
    <body>
        <button onclick='Count(this)'> Click to count </button>
        <div id='containerDiv'>

        </div>
    </body>
</html>

A la base j’étais parti avec un truc dans ce genre là :

Code:

<input style="width:10%;" id="autre1" name="autre1" type="button" value="calculer" onClick="window.document.getElementById('output').value = window.document.getElementById('produit1').value  * window.document.getElementById('quantite1').value;"/>

Mais là ???

Les question :
Comment récupérer les value de input et input2 ? je me lance à tenter un peu tout, on ne sait jamais et au bout d'un moment ça détend. Donc :

var x =document.getElementsByTagName("input").value;? 8O
var y =document.getElementsByTagName("input2").value;?? 8O

Ajouter au bouton calculer :

t.onclick =" x * y " = document.getElementsByTagName("input3").value; 8O :cry:

je ne sais plus, je suis rincé mdr Une petite (micro) pause s'impose, je crois :lol: :lol: :lol:

zeb · 11 Mars 2015

ctofff a dit:
Comment récupérer les value de input et input2 ?

Non il faut que tes id soient tous sur le même format input1, input2, input3 etc ... y compris l'input initial.
Ensuite aux différents ajouts tu incrémente une variable pour disposer de l'indice maximum qui dépend du nombre de lignes ajoutées et que tu ne connaîtras jamais a l'avance sinon tu ne construirait pas une fonction d'ajout d'input.

Du coup a l'aide de boucles ou autre tu pourra accéder aux différentes valeurs de tes inputs pour les manipuler sous la forme :
var moninput = document.getElementByid('input'+x).value ;

évite de manipuler le DOM par les propriété "name" (getElementsByTagName) utilise plutôt des id uniques (getElementByid) c'est plus propre et vire le code de style de ton javascript c'est dégueulasse tout en le rendant illisible si tu en as besoins met une class pas des trucs comme style="width:10%;". Mais bon quand on construit un code on ne se préocupe pas de questions de design ça alourdi pour rien fait ça à la fin sauf si tu est sur de toi ce qui n'est visiblement pas le cas :wink: .