Javascript insertion dynamique d'input - prb [Résolu]

Messages postés
4
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
12 septembre 2011
- - Dernière réponse : tannana86
Messages postés
4
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
12 septembre 2011
- 12 sept. 2011 à 00:05
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 

i=i+1;

if(i<20){
Contenu = Contenu +

'

<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>" onclick="removeIt('+i+')" />

'; // 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>


<?php echo NOM;?>,  <?php echo QUANTITE;?>,  <?php echo MESURE;?>,  <?php echo EQUIVALENT;?>


Je vous remercie profondément !
Afficher la suite 

6 réponses

Meilleure réponse
Messages postés
72
Date d'inscription
mercredi 7 février 2007
Statut
Membre
Dernière intervention
25 juillet 2013
1
3
Merci
Bonsoir,

Essaie de créer un nouvel élément avec la méthode "createElement". Je te donne un exemple, à toi d'adapter à ce que tu veux faire !

var Contenu = document.getElementById('Cible'); //récupération de ta cible

var nouveauContenu=document.createElement('div'); //Création d'un nouvel élément
nouveauContenu.innerHTML="Test de contenu"; //Contenu de ton nouvel élément

Contenu.appendChild(nouveauContenu); // On ajoute ensuite ce nouvel élément à la cible



Bonne continuation !
---------------------
Oderint dum metuant

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 130 internautes nous ont dit merci ce mois-ci

Commenter la réponse de pmcoste
Messages postés
1705
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
12 juillet 2019
40
0
Merci
bonjour

sa serait bien de n'avoir que le fichier generé sans php et avec les retour chariot

et je ne voit pas l'element qui a l'id cible ?
Commenter la réponse de @karamel
Messages postés
4
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
12 septembre 2011
0
Merci
Avant tout, je vous remercie pour votre soutien.
sa serait bien de n'avoir que le fichier generé sans php et avec les retour chariot

ecxusez moi mais j'ai pas trop compris (je suis un débutant), mais d'apres ce que j'ai compris, pas de CONSTANT php quoi.
(code source navigateur).
Et en ce qui concerne l'id Cible, autant pour moi j'ai mis le mini tab avec une class Cible, qui affiché les titre des colonnes
Bref, voila le 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 


i=i+1;



if(i<20){

Contenu = Contenu +



'

<select style="width:80px; margin-right:2px; margin-left:2px;" name="mesure'+i+'"><option value=0>Choisir</option><option value=1>Gramme(s)</option><option value=2>Centilitre(s)</option></select><select style="margin-right:2px; width:57px; " name=equivalent_nbr'+i+' id=equivalent_nbr'+i+'><option value=1>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+'><option value="0">Rien</option><option value="1">assiette(s)</option><option value="2">bol(s)</option><option value="3">cube(s)</option><option value="4">cuillière(s) à café</option><option value="5">cuillière(s) à soupe</option><option value="6">dosette(s)</option><option value="7">louche(s)</option><option value="8">morceau(s)</option><option value="9">paquet(s)</option><option value="10">part(s)</option><option value="11">portion(s)</option><option value="12">poignée(s)</option><option value="13">pot(s)</option><option value="14">pincée(s)</option><option value="15">tasse(s)</option><option value="16">tranche(s)</option><option value="17">verre(s)</option><option value="18">sachet(s)</option><option value="19">pièce(s)</option></select>

'; // 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("Vous avez atteint le nombre maximum autorisé de clic ! 
 Vous avez le droit de cliquer 20 fois au maximum sur le bouton Ajouter un produit. Pour recommencer, actualisez la page");

}

}

function removeIt(i){ 

ligne = document.getElementById('suppr'+i+'');

ligne.removeChild(ligne.firstChild );

} 

</script>



Nom,  Quantite
(g/cl),  Mesure,  Equivalent à







<!-- tableau qui va contenir les produits -->





encore merci !
Commenter la réponse de tannana86
Messages postés
1705
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
12 juillet 2019
40
0
Merci
j'utilise tres peut innerHTML mais il est fort possible qu'en fesant

var Contenu = document.getElementById('Cible').innerHTML;


ca ne recopie que le html et pas les valeurs contenu dans les input il faudrait faire un teste comme ceci

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 


i=i+1;

document.getElementById('Cible').innerHTML = Contenu;
}
Commenter la réponse de @karamel
Messages postés
4
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
12 septembre 2011
0
Merci
Bonsoir,
Malheureusement, toujours pas !
J'y perd mes cheveux
Commenter la réponse de tannana86
Messages postés
4
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
12 septembre 2011
0
Merci
Merci beaucoup pmcoste !! je viens à peine de tester avec un seul input et ca marche à merveille !! il me reste juste à adapter mon code et adapter le bouton qui supprime l'input !!! Encore merci pour votre esprit d'aide et de partage.

A bientôt
Bonne soirée
Commenter la réponse de tannana86