Creer un formulaire dynamiquement entre deux balises

Version imprimable

16/07/2009, 16h40
c-bolo

Creer un formulaire dynamiquement entre deux balises

Bonjour à tous,

Je veux ajouter des champs <input type="txt"> via Javascript

Exemple:
L'utilisateur écrit la valeur 3 dans un champs txt
En appelant onblur() je veux afficher 3 X <input ..name="?" id="?"...> entre deux balise précise.

Ps: j'ai chercher sur la toile(google) j'ai n'est pas trouvé mon bonheur :cry:
Merci à tous
16/07/2009, 16h56
SpaceFrog

fallait pas aller chercher si loin ;)
http://www.developpez.net/forums/d53...ynamique-form/
16/07/2009, 16h56
E.Bzz

Bonjour,

Citation:

Envoyé par c-bolo

j'ai chercher sur la toile(google) j'ai n'est pas trouvé mon bonheur :cry:

il suffisait de la FAQ ;)

Mais tu trouveras beaucoup plus élaboré dans les Contributions ...

EDIT : grillé !

A+
17/07/2009, 12h16
c-bolo

Merci à vous deux Messieurs.

Cependant j'ai pas réussie à adapter le code SpaceFrog :?
J'ai aussi essaye d'utiliser le code de siddh (FAQ) http://javascript.developpez.com/faq...DOM#DOMajouter

J'ai aucun résultat ... 8O

Dans un premier temps j'aimerai un tout petit exemple ...
Je veux que l'utilisateur clic sur un button et en dessous de celui-ci s'affiche un <input ... >

Ps: vous auriez pas un exemple de site (formulaire) qui propose cela ?

Merci à tous
17/07/2009, 12h35
E.Bzz

Citation:

Envoyé par c-bolo

J'ai aussi essaye d'utiliser le code de siddh (FAQ) http://javascript.developpez.com/faq...DOM#DOMajouter

J'ai aucun résultat ... 8O

Montre nous ce que tu as fait : on trouvera l'os ;)

A+

Ma function JAVASCRIPT

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ajouteElement() {
  var mon_input = null;
  var nouveauInput = null;
  var nbrQ=document.forms['form'].nbrQ.value;
  //Dans nbrQ se trouve un valeur numérique, cela me permettra de creer X fois des <input ...
  for(i=0;i<nbrQ;i++){
	nouveauInput = document.createElement("input");
	nouveauInput.innerHTML = "<br>Question 0"+i;
 
	// ajoute l'élément qui vient d'être créé et son contenu au DOM
	mon_input = document.getElementById("nbrQ");
	document.body.insertBefore(nouveauInput, mon_input);
  }
}

Mon formulaire HTML

Code:

1
2
3
<form action="#" method="post" id="form" name="form">
	Nombre de question:<input type="text" id="nbrQ" name="nbrQ" onblur="ajouteElement();"><br>
</form>

Je voudrais avoir se resultat si l'utilisateur insert le nombre 3

Code:

1
2
3
4
5
6
7
<form action="#" method="post" id="form" name="form">
Nombre de question:<input type="text" id="nbrQ" name="nbrQ" onblur="ajouteElement();"><br>
Question 01: <input type="text" id="q01" name="q01" > Réponse <input type="text" id="r01" name="r01" >
Question 02: <input type="text" id="q02" name="q02" >Réponse <input type="text" id="r02" name="r02" >
Question 03: <input type="text" id="q03" name="q03" >Réponse <input type="text" id="r03" name="r03" >
 
</form>

Bon je pense qu'il a quelque erreur car je suis pas concentré, j'ai faim ...

Sinon merci à tous

17/07/2009, 13h49
E.Bzz

Ben tu n'as pas vraiment respecter les instructions de la FAQ.
Utilise appendChild() au lieu de insertBefore().
Le appendChild() doit être fait à partir de l'objet form (et non de l'input qui le précède).
createTextNode() au lien de innerHTML.
Enfin, il faut définir les attributs du nouvel input avant de l'"appender" ...

EDIT : et un .value est toujours de type caractère =>

Code:

var nbrQ=parseInt(document.forms['form'].nbrQ.value,10);

A+