Javascript insertion dynamique d'input - prb

Tanna -

Bonjour,

Après des multiple essais infructueux, je m'adresse à vous chères âmes charitables !!

Mon objectif étant de :
pouvoir créer et supprimer dynamiquement des lignes de tableau contenant des inputs.
J'ai bien réussi à le faire, sauf qu'il y a un tout petit problème.
Quand j'insère une nouvelle ligne, les valeurs des input de la ligne au dessus se vide (ce que l'utilisateur a écrit.

Par exemple :

Je dois créer 2 produits, je créer une 1ère ligne, je met Produit A comme nom, je clique sur ajouter un autre produit, et la, Produit A disparaît laissant place à un champs vide.

Voici mes code

			<script type="text/javascript"> //les fonction javascript pour ajouter / supprimer des produits ou des ?pes
			var i = 0;

				function fAddText() { //fonction qui cr?une ligne de produit en plus
					var Contenu = document.getElementById('Cible').innerHTML; //on affecte la var contenu a tout ce qui est dans <div id="cible">
					i=i+1;
	
					if(i<20){
					Contenu = Contenu +
					
			'<div style=\"float:left; width:515px; margin-left:2px; margin-bottom:2px;\" id=\"suppr'+i+'\"><div><input style=\"margin-right:2px;:100px;\" type=\"text\" name=\"produit'+i+'\"/><input type=\"text\" name=\"quantite'+i+'\" style="width:40px;" /><select style=\"width:80px; margin-right:2px; margin-left:2px;\" name=\"mesure'+i+'\"><option value=0><?php echo CHOISIR;?></option><option value=1><?php echo GRAMME;?></option><option value=2><?php echo CL;?></option></select><select style=\"margin-right:2px; width:57px; \" name=equivalent_nbr'+i+' id=equivalent_nbr'+i+'><option value=1><?php echo RIEN;?></option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select><select style=\"margin-right:2px; width:80px; \" name=equivalent'+i+' id=equivalent'+i+'><?php $req=mysql_query("SELECT * FROM recipients");while($data=mysql_fetch_assoc($req)){echo '<option value="'.$data['id'].'">'.constant($data['Lib']).'</option>';}?></select><input type="button" value="<?php echo SUPPRIMER_PROD;?>" onclick="removeIt('+i+')" /></div></div>'; // chaque clic qui declanche cette fonction, contenu aura un input en plus
					
					document.getElementById('Cible').innerHTML = Contenu;//on reaffecte le tout a la var Contenu
							}
					else
					{
					alert("<?php echo NBR_LIMITE_CLIC; ?>");
					}
				}
				function removeIt(i){ 
				ligne = document.getElementById('suppr'+i+'');
				ligne.removeChild(ligne.firstChild );
				} 
			</script>
			<script type="text/javascript">
					var j = 0;
					function fAddText2() { //fonction qui cr?une ligne qui contient une ?pe en +
					var Contenu = document.getElementById('Cible_2').innerHTML; //on affecte la var contenu a tout ce qui est dans <div id="cible">
					j=j+1;
					if(j<10){
					Contenu = Contenu +'<div style=\"float:left; text-align:center; width:512px; margin-top:5px; margin-bottom:5px; \" id=\"suppr2_'+j+'\"><div><textarea rows=\"2\" style=\"width:350px; color:#666666; border: 3px solid #d8d8d8;\" name=\"etape'+j+'\"></textarea> <input type="button" value="<?php echo SUPPRIMER_ETAPE;?>" onclick="removeIt2('+j+')" /> </div></div>'
					document.getElementById('Cible_2').innerHTML = Contenu;//on reaffecte le tout a la var Contenu
							}
					else
					{
					alert("<?php echo NBR_LIMITE_CLIC_2; ?>");
					}
				}
				function removeIt2(j){ 
				ligne = document.getElementById('suppr2_'+j+'');
				ligne.removeChild(ligne.firstChild );
				} 
			</script>

<table style=" width:515px;color:#666666">
					<tr>
							<th style="width:150px;"><?php echo INGREDIENTS; ?>  <span class="obligatoire">*</span> :</th><td><center><input type="button" value="<?php echo AJOUTER_PROD;?>" onclick="fAddText()" /> <?php aide("DEUX_INGR_MINI"); ?></center>	</td>
							</tr>
					</table>

Je vous remercie profondément !

Afficher la suite

2 réponses

Réponse 1 / 2
Tanna
Bonsoir,
Merci beaucoup, je tacherais de l'adapter !!si j'y arrive pas je reviens!

0

Alain_42

Salut,

essayes de t'inspirer de cet exemple de code, pris sur le site www.siteduzero.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajout  input dynamiquement</title>
<script type="text/javascript">

function refresh(event){
        //On sélectionne le premier et le deuxième fieldset
        var liste = document.getElementById("liste_deroulante");
        var text_fieldset = document.getElementById("zone_text");
        
        //On récupère la position de notre champ texte
        var node_source = (document.all)?event.srcElement:event.target;
        var position = node_source.previousSibling.nodeValue.split(" ")[1];
        
        //On récupère la valeur dans la champ texte
        var labels = text_fieldset.getElementsByTagName("label");
        var label = labels[position-1];
        var input = label.getElementsByTagName("input")[0];
        
        //On met à jour la liste déroulante
        var option = liste.getElementsByTagName("option")[position-1];
        option.firstChild.nodeValue = input.value;
}

function del(event){
        //on sélectionne le premier fieldset et on récupère tous les label qu'il y a à l'intérieur
        var text_fieldset = document.getElementById("zone_text"); 
        var labels = text_fieldset.getElementsByTagName("label");
        
        //On récupère le noeud qui émet l'évènement et sa position grâce au texte Valeur x
        var node_source = (document.all)?event.srcElement:event.target;
        var position = node_source.previousSibling.firstChild.nodeValue.split(" ")[1];
        
        //On décale d'un cran inférieur tous les éléments situés après l'élément à supprimer
        for(var i=position;i<labels.length;i++){
                var label = labels[i];
                var input = label.getElementsByTagName("input")[0];
                
                input.setAttribute("name","nom"+i);
                
                label.firstChild.nodeValue = "Valeur "+i+" ";
        }
        
        //Suppression de la zone de texte, du lien et du saut de ligne
        var label = labels[position-1];
        var lien = label.nextSibling;
        var br = lien.nextSibling;
        text_fieldset.removeChild(label);
        text_fieldset.removeChild(lien);
        text_fieldset.removeChild(br);
        
        //Suppression de l'élément d'option
        var liste = document.getElementById("liste_deroulante");
        var select = liste.getElementsByTagName("select")[0];
        var option = select.getElementsByTagName("option")[position-1];
        select.removeChild(option);
        
}

function add(){
        //On compte le nombre de label et on sélectionne le premier fieldset
        var count = document.getElementsByTagName("label").length;
        var text_fieldset = document.getElementById("zone_text");
        count ++;
        
        //création du label( <label>Valeur x <input type="text" name="nomx" value="" /></label>)  
        var input = document.createElement("input");
        input.setAttribute("type","text");
        input.setAttribute("name","nom"+count);
        input.setAttribute("value","");
        
        if(document.all) input.attachEvent("onkeyup",refresh);
        else input.addEventListener("keyup",refresh,true);
        
        var nom_label = document.createTextNode("Valeur "+count+" ");
        var label = document.createElement("label");
        label.appendChild(nom_label);
        label.appendChild(input);
		  
        ////cas avec bouton supprimer //ne marche pas !!!
        //Création des élement br et p ( <p class="lien">Supprimer</p><br /> )
        /*
		var br = document.createElement("br"); 
		  var p_del = document.createElement("p");
		  var bouton_del=document.createElement("input");
        input.setAttribute("type","button");
        input.setAttribute("name","BT_"+count);
        input.setAttribute("value","Supprimer");
		  
		  if(document.all) bouton_del.attachEvent("onkeyup",del);
        else bouton_del.addEventListener("keyup",del,true);
		  
		  p_del.appendChild(bouton_del);
		  */
		  //cas avec lien Supprimer  /// fonctionne
		
        var del_text = document.createTextNode("Supprimer");
        var lien_del = document.createElement("p");
        lien_del.setAttribute("class","lien");
        lien_del.setAttribute("className","lien");
			
        if(document.all) lien_del.attachEvent("onmouseup",del);
        else lien_del.addEventListener("mouseup",del,true);
        
        lien_del.appendChild(del_text);
			
        //On raccroche ici tous nos éléments virtuels à une balise de notre fichier XHTML. Ils sont alors affichés   
        text_fieldset.appendChild(label);
        //text_fieldset.appendChild(lien_del);
        text_fieldset.appendChild(bouton_del);
        text_fieldset.appendChild(br);
        
        //Ajout d'un élément d'option vide dans notre liste ( <option value=""></option> )
        var liste = document.getElementById("liste_deroulante");
        var select = liste.getElementsByTagName("select")[0];
        var option = document.createElement("option");
        var texte = document.createTextNode("valeur"+count);
        option.setAttribute("value","nom"+count);
        option.appendChild(texte);
        select.appendChild(option);
}
</script>
</head>
<body>

<p id="testbox">If you see information appearing in the current box when you click in a text field javascript is enabled on your computer</p>
                <div class="javascript">
                        <form action="" method="post">
                                <fieldset id="zone_text">
                                        <!-- <p class="lien" onClick="javascript:add()">Ajouter un champ texte</p><br /> -->
                                        <input type="button" class="lien" onClick="javascript:add()" value="Ajouter un champ texte" /><br />
                                </fieldset>
                                <fieldset id="liste_deroulante">
                                        <select name="liste">
                                        </select>
                                        <input type="submit" value="Valider" /><br /><br />
                                </fieldset>
                        </form>
                </p>
                <script type="text/javascript">
                        add();
                </script>
</body>
</html>

Javascript insertion dynamique d'input - prb

2 réponses

Discussions similaires

Newsletters