Comment inserer dynamiquement un champ input

Signaler
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
-
aholigans
Messages postés
2
Date d'inscription
mercredi 27 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010
-
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.

<html>
<head>
<script language=javascript>
cpt_input = 1;


function ajout_input()
{
cpt_input++;
var text = '';
document.getElementById("inputs").innerHTML =+ text;
}
</script>
</head>





</html>

Jarod_Delaware

20 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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       [
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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       [
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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.

<script language=javascript>
cpt_input = 1;


function ajout_input()
{
cpt_input++;

var text = '&nbsp;
';


document.getElementById("inputs").innerHTML += text;
alert('name="test' + cpt_input+'"');
}
</script>
</head>

<form name="frm">



</form>

Jarod_Delaware
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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    
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
Super, ça marche nickel. Décidement, je fais plein d'erreurs de syntaxes... Merci beaucoup Bultez pour ton aide.

Jarod_Delaware
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
>>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    
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
>>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        
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
Suis un peu perdu. J'etais parti sur un truc du genre :

function ajout_input()
{
cpt_input++;


var text = '&nbsp;
';


document.getElementById("inputs").innerHTML += text;
alert(cpt_input);
}

<?php
$compteur = "<script>Number(cpt_input);</script>";
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 = '
&nbsp;
';


document.getElementById("inputs").innerHTML += text;
}

Par contre, pour la boucle for ça va se passer comment? c'est i<=test[] ?
Jarod_Delaware
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
<?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
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
en php, tu sais comment gérer un array ?
    $_POST['toto'] en est un.
<hr />



Cordialement                Bul        
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
>>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.


<hr />




Cordialement                Bul        
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
répondu trop vite....

      for ($i=0; $i<count($_POST['toto']); $i++) {
    à priori ?


<hr />




Cordialement                Bul        
Messages postés
273
Date d'inscription
samedi 5 juillet 2003
Statut
Membre
Dernière intervention
31 mars 2015
1
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
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

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'&eacute;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'&eacute;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>
<HEAD>
<script language=javascript>
cpt_input = 1;
function ajout_input()
{
     var i = document.getElementById('idduchamp').value;
     for(i =1; i<=10;i++ ){
      
        var text = '&nbsp;&nbsp;&nbsp;&nbsp;Horizon : &nbsp;&nbsp;&nbsp;Quantite :
';
        document.getElementById("inputs").innerHTML += text;
       
     }
}
</script>
</HEAD>

                <tr><td nowrap="nowrap">Nombre d'&eacute;chantillon:</td>
               <td></td></tr>
               <tr align="center"><td id="inputs"></td></tr>
  
</table>

 
 </HTML>
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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        
Messages postés
2
Date d'inscription
mercredi 27 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010

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:

<script>
var i=0;

function inserer_ligne()
{
if(i<1){
document.getElementById('TR').innerHTML += "<tr id='TR_"+i+"'>"
+"<td></td>"+" "+
"<td></td>"+" "+
"<td></td>"+" "+
"<td></td>"+" "+
"<td></td>"+" "+
"<td></td>"+" "+
"<td></td>"+" "+
"</tr>";
}
else
{
document.getElementById('TR').innerHTML += "<tr id='TR_"+i+"'>"
+"<td></td>"+" "
+"<td></td>"+" "
+"<td></td>"+" "
+"<td></td>"+" "
+"<td></td>"+" "
+"<td></td>"+" "
+"<td></td>";

}
i++;
}
</script>



et voilà l'appel au fction dans le 'body' :