Javascript insertion dynamique d'input - prb
Tanna
-
Tanna -
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
Je vous remercie profondément !
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 !
A voir également:
- Javascript insertion dynamique d'input - prb
- Tableau croisé dynamique - Guide
- Insertion sommaire word - Guide
- Touche insertion clavier - Guide
- Insertion filigrane word - Guide
- Insertion liste déroulante excel - Guide
2 réponses
Salut,
essayes de t'inspirer de cet exemple de code, pris sur le site www.siteduzero.com
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>