Comment inserer dynamiquement un champ input

Question

Bonjour, Je voudrais savoir comment peut on insérer dynamiquement des champs input type texte dans une page. Sachant que chaque champ input text doit avoir un id différent afin que je puisse récupérer leurs valeurs dans une table mysql avec du php. J'ai testé une solution en php pour pouvoir générer dynamiquement ces champs mais ma page je recharge donc du coup j'ai essayé une solution javascript, mais mon code me retourne une valeur NaN lorsque je clique sur ajouter. Est ce que quelqu'un peut m'aider ? Merci. Jarod_Delaware

cs_bultez · Answer

Bonjour,
   +et non pas+ 

document.getElementById("inputs").innerHTML += text; 

   remarque : tu ne met pas ID= mais name= ??
   ça ne fonctionnera que son IE ( IE sait replacer un
      ID manquant par son name, pas FF par exemple )
   php, par contre ne récupère effectivement que les value des 
      champs qui ont un name.

   met donc comme name_du_formulaire["toto[]"][numero]
            ( attention à la syntaxe : pas de . )
   

<hr />
            Cordialement          Bul       [

cs_bultez · Answer

encore une remarque...
   inerHTML est très pratique, mais si on ajoute
      de nombreux champs les performances se dégradent.

      dans ce cas, il vaut mieux utiliser : createElement et appendChild.

<hr />                  Cordialement          Bul       [

Jarod1980 · Answer

Salut,
Merci pour toutes ces précisions. Je vais tester ce que tu m'as marqué. Je te tiens au courant. 
Encore merci pour l'aide. 

Jarod_Delaware

Jarod1980 · Answer

Juste une petite question, lorsque je fais un test pour voir si j'arrive à récupérer la valeur dans un des champs input ça me génère une erreur. J'ai fais ce test parce que dans mon script php j'insère des champs vide dans ma bdd. Jarod_Delaware

cs_bultez · Answer

de ch'tites erreurs.

__ il manque une " dans le name et c'est text pas texte
        ...'&nbsp;...

__ l'input fait partie du formulaire
       ...alert(document.frm.test2.value);...

<hr />


Cordialement                 Bul

Jarod1980 · Answer

Super, ça marche nickel. Décidement, je fais plein d'erreurs de syntaxes... Merci beaucoup Bultez pour ton aide. 

Jarod_Delaware

cs_bultez · Answer

>>je fais plein d'erreurs de syntaxes
    si ça peut te rassurer... tu n'es pas le seul !
    des erreurs de syntaxe ou autres tout le monde en fait 
        essaye les soit disant validateurs w3c ;-)) par exemple, tu vas rire...
    le tout, c'est de trouver, de rectifier, de faire marcher... 

    tu connais le proverbe : il n'y a que celui qui ne fait rien qui ne fait pas de conneries.
        j'essaye de faire le moins de conneries possibles... 
        pour être clair : j'essaye d'en faire le moins possible !






<hr />




Cordialement             Bul

Jarod1980 · Answer

lol, c'est vrai tu as tout à fait raison. Je te remercie pour ton aide, j'avance à petit pas. Mon problème est quasi réglé. Il faut juste que je trouve le moyen de savoir combien de champ input ont été insérer dans la page pour pouvoir faire une boucle lors de l'insertion de toutes les valeurs dans ma BDD.

@+

Jarod_Delaware

cs_bultez · Answer

>>il faut juste que je trouve le moyen de savoir combien de champ input ont été inséré
met un name "toto[]"            avec crochets
php récupérera un array, donc on connait directement le nombre coté serveur


<hr />




Cordialement                 Bul

Jarod1980 · Answer

Suis un peu perdu. J'etais parti sur un truc du genre : function ajout_input() { cpt_input++; var text = ' '; document.getElementById("inputs").innerHTML += text; alert(cpt_input); } Number(cpt_input);"; for(i=1; i<=$compteur;i++) {... } ?> Mais bon ça donne rien. Si je comprends bien, il faut que je fasse : function ajout_input() { cpt_input++; var text = ' '; document.getElementById("inputs").innerHTML += text; } Par contre, pour la boucle for ça va se passer comment? c'est i<=test[] ? Jarod_Delaware

cs_bultez · Answer

<?php
    if ( isset($_POST['toto']) ) 
    {    print_r ($_POST['toto']);    }
?>
<form name='frm" method="post">
    
    
    
</form>




ch'tit exemple...

le fait que les input soit dans un div et mis en dynamique ne change rien.

...var text = '... pour ton cas.
et je t'ai mis dans un message précédent comment utiliser coté javascript.




<hr />




Cordialement Bul

cs_bultez · Answer

en php, tu sais comment gérer un array ?
    $_POST['toto'] en est un.
<hr />



Cordialement                 Bul

Jarod1980 · Answer

OK, c'est plus clair maintenant. Je pensais au début qu'il fallait que tous les champs input aient un name différents, en fait c'est uniquement les ids qui doivent changer.
Justement, je savais pas trop comment gérer les arrays mais ton message répond à ma question.
Du coups, ma boucle sera du style :

function ajout_input() 
{ 
cpt_input++; 

var text = '
&nbsp;
'; 

document.getElementById("inputs").innerHTML += text; 
}

for ($i=1; $i<=$_POST['toto']; $i++) {
$dynamique = 'id_'.$i;
$dynamique2 = 'id_'.$i;   
 $value = $_POST[$dynamique]; 
 $value2 = $_POST[$dynamique2];
echo 'Valeur du champ '.$i.' : '.$value.'&nbsp;
'.$value2; 
$req = "INSERT INTO Calendar (jours, sortie) VALUES('$value','$value2')"; 
mysql_query($req); 
}  

C'est bien ça ? Un champ input correspond à jours et celui qui est à coté c'est sortie.

Jarod_Delaware

Jarod1980 · Answer

Je me suis trompé ds mon précédent msg : for ($i=1; $i<=$_POST['test']; $i++) {... }

J'ai testé mais ça m'enregistre plein de champs vide dans la bdd et ça tourne en boucle. 

Jarod_Delaware

cs_bultez · Answer

>>for ($i=1; $i<=$_POST['toto']; $i++) { for ($i=1; $i<=count($_POST['toto']); $i++) { et le contenu de chaque élément : $_POST['toto'][$i] mais c'est du PHP ça.

Cordialement Bul

cs_bultez · Answer

répondu trop vite....

      for ($i=0; $i<count($_POST['toto']); $i++) {
    à priori ?


<hr />




Cordialement                 Bul

Jarod1980 · Answer

c'est bon ça boucle plus de façon infini. Reste plus que les champs qui reste vide à regler. Faut que je revois le javascript. theoriquement ça devrais marcher. J'ai fais comme tu m'as dis :

var text = '
&nbsp;
'; 
document.getElementById("inputs").innerHTML += text; 

Jarod_Delaware

cs_daris · Answer

Bonjour , Je me suis inspirer de ce echange pour faire mon code voila que je rencontre un souci. En effet, je souhaite suivant la valeur saisie dans le champ Nombre d'échantillon generer dynamiquement des champs var text. Exemple si je saisie le chiffre 3 que cela me genere 3 fois var text. pour cela j'ai essayer de recuperer la valeur du champs Nombre d'échantillon par l'expression : document.getElementById('idduchamp').value Et aussi, j'ai utilise l'évènement onchange... Tout cela ne marche pas, si vous pouvez m'aider.Merci voila mon code: HTML> Nombre d'échantillon:

cs_bultez · Answer

Bonjour,
    tu as du bol que je passe...
    et ici ne vont lire que ceux qui sont intervenu,
        une nouvelle question sur le forum aurait été plus adhéquat....

     var max = document.getElementById('idduchamp').value;
     for(i =1; i<=max;i++ ){

<hr />                Cordialement             Bul

aholigans · Answer

salut à vs ts, en faite j'ai le meme probleme que jarod1980, j'ai un tableau contenant 7 champs tewte (textfields), lorsque je clique sur un boutton un appel à une fonction "inserer_ligne()" de creation dynamique d'une nouvelle ligne dans ce tableau s'execute cela fonctionne tres bien, mon probleme est que je veu bien inseré tt ces champs dans une BD mysql, je sais pas comment je procede d'une maniere dynamique càdire chaque ligne ajouté sera enregistré dans la BD merci infiniment. voilà ma fct javascript: et voilà l'appel au fction dans le 'body' :

Comment inserer dynamiquement un champ input

20 réponses

Votre réponse

Discussions similaires