Javascript insertion dynamique d'input - prb

Résolu

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

A voir également:

Javascript insertion dynamique d'input - prb
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Lien javascript - Forum Javascript / DHTML
Javascript goto ✓ - Forum Javascript / DHTML

6 réponses

Réponse 1 / 6

pmcoste Messages postés 72 Date d'inscription mercredi 7 février 2007 Statut Membre Dernière intervention 25 juillet 2013 1
11 sept. 2011 à 23:32

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

Réponse 2 / 6

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
11 sept. 2011 à 19:46

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 ?

Réponse 3 / 6

tannana86 Messages postés 4 Date d'inscription vendredi 27 août 2010 Statut Membre Dernière intervention 12 septembre 2011
11 sept. 2011 à 20:06

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 !

Réponse 4 / 6

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
11 sept. 2011 à 21:50

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;
}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

tannana86 Messages postés 4 Date d'inscription vendredi 27 août 2010 Statut Membre Dernière intervention 12 septembre 2011
11 sept. 2011 à 22:45

Bonsoir,
Malheureusement, toujours pas !
J'y perd mes cheveux

Réponse 6 / 6

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

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

Discussions similaires

afficher du texte arabe dans un textarea ou un input

Partie entiére d'un nombre

Créer un input type Button avec une onClick !

Passer un tableau dynamique en paramètre

Line input

Votre réponse

Discussions similaires