Comment Créer champ INPUT dans la meme page

Version imprimable

Bonjour,

voila mon soucis, j ai un formulaire dynamique a faire remplir .
Par exemple, Nombre d'enfant : "2".
Alors je veux créer 2 champs supplémentaire sur le même formulaire pour saisir les noms des enfants...

Pour le moment mon code c ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?php 
 echo '<br><br>
Nombre de transgène* : 
<input type="text" name="nbeTr" size = "3" onChange="nbTR()">';
 
<script language="JavaScript" >
 function nbTR()
 {
        
                i=1;
                NombreTr = document.forms['FrmInfoGenerale'].nbeTr.value ;
                Nb = parseInt(NombreTr);
                alert(Nb);
        with (parent.Animal2.php){      
                for (i=1;i<=Nb; i++) {
                        // on créé autant de champs text pour saisir les noms de transgène qu il y a de transgenes
                        document.write('<br>');
                        document.write('Nom du transgène ', i, ' : ');
                        document.write('<input type="text" name="nbeTr" size = "3" onChange="nbTR()"');
                }
        }
}
</script>
?>

pour le moment document.write l'affiche dans une nouvelle page blanche,
comment faire pour que que cela s affiche dans le meme formulaire !!! ?

Merci de votre aide !

11/04/2006, 10h41
10-nice

euh c un peu tout mélangeé et il manque du code :?

Pas la peine de faire un echo pour afficher des éléments de formulaire, tu peux meme carrément enlever tes balises php elles ne servent à rien ici, de plus le javascript inclus dedans fait peter ta page.

Il n'y a pas de balise de formulaire, pas de bouton submit, il manque la fin d'nu eventuel input

Citation:

document.write('<input type="text" name="nbeTr" size = "3" onChange="nbTR()" />');

Est-il possible d'avoir un code un peu plus conséquent pour pouvoir t'aider?

ben voila tout le code que g pour le moment mais c loin d etre fini !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<html>
<head>
<title> Création d'un transgénique </title>
</head>
<link href="StyleChercheur.css" rel="stylesheet" type="text/css"> 
 
<body>
 
<?php
require("Verification.php");
//<! Pour la connexion à la base : temporairement là !>
function db_connect(){
// Connection à la base de données
$nombase = "animalerie";
$BD_Animalerie = mysql_connect($HOTE,$ID,$PWD) or die("la connexion a échouée!") ;
mysql_select_db($nombase,$BD_Animalerie);
}
db_connect();
?>
 
<center><H3>Informations générales: </H3><br><br>
<! Toutes ces informations sont obligatoires !>
 
<?php
$ReqFondGenetique = "SELECT * FROM FOND_GENETIQUE;";
$ResFondGenetique = mysql_query($ReqFondGenetique);
// $ReqNumInd = 
?>
 
<form action="Animal2.php" method="POST" name="FrmInfoGenerale" id="FrmInfoGenerale" >
 
<?php 
 
echo 'Fond génétique* : <br>';
echo '<select name="Liste_FondGenetique">';
echo '<option value="fondGenetique"> </option>';
 
// si la requête a été bien éxécuté
if($ResFondGenetique)
{
// on remplie la liste de choix avec les différents fond génétique
while($ligne = mysql_fetch_assoc($ResFondGenetique))
{
echo '<option value="fondGenetique">', $ligne['FondGenetiqueNom'], '</option>';
}
// fin de la liste de choix
print '</select>';
// on vide la variable
mysql_free_result($ResFondGenetique);
}
else
{
// si la requête n a pas pu etre executer on affiche un message
Print "impossible d exécuter la requete";
}
 
echo '
<br><br>
Nombre de transgène* : 
<input type="text" name="nbeTr" size = "3" onChange="nbTR()">
 
<br><br>
N° de lignee * :
<input type="integer" name="numLignee" size="3" >
 
<br><br><INPUT type=submit value=Valider name="SaveNom">';
?>
 
<script language="JavaScript" >
 function nbTR()
 {
 
		i=1;
		NombreTr = document.forms['FrmInfoGenerale'].nbeTr.value ;
		Nb = parseInt(NombreTr);
		alert(Nb);
			for (i=1;i<=Nb; i++) {
			// on créé autant de champs text pour saisir les noms de transgène qu il y a de transgenes
			document.write('<br>');
			document.write('Nom du transgène ', i, ' : ');
			document.write('<input type="text" name="nbeTr" size = "3" onChange="nbTR()"');
		}
}
</script>
 
</form>
<?php
mysql_close();
?>
 
</body>
 
</html>

[/quote]

Quand tu utilises ton formulaire, ton document est déjà chargé...
Le fait d'utiliser ensuite "document.write" va avoir pour effet de créer un nouveau document...

il te faut utiliser les fonctions DOM...

dans ta fonction nbTR()...
Code:

1 2 3 4 5 6 7 8 9 myForm = getElementById( "FrmInfoGenerale" ); nb = myForm.nbeTr.value; for ( i = 1; i <= nb; i++ ) { myInput = document.createElement( 'input' ); myInput.name = "enfant_" + i; // tu peux continuer a définir les attributs avec myInput.attribute... myForm.appendChild( myInput); }
adapte ce code à tes besoins et ca devrais rouler...
je te précise que ce code simplifié a pour effet de rajouter à chaque changement de nbTR un certain nombre de champ input...
par exemple tu mets 2 dans ton champ, puis ensute 3, et tu te retrouves avec 5 champs input...

à ce moment, essaie de trouver des infos sur document.removeChild()
et fait des tests pour ne pas recréer des input qui "existent déjà"...

L'utilisation du DOM est assez compliquee et pas forcement identique entre ie, ff et opera (pour ne citer qu'eux). Il existe une methode plus simple qui consiste a remplir dynamiquement le HTML d'un div avec la propriete innerHTML. Un exemple a adapter a ton cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
	<head>
		<script type="text/Javascript">
			function Saisir(nbChamps) {
				alert("Saisir");
				chaine = "";
				separateur = "";
				if ( nbChamps > 0 ) {
					separateur = "<ul><li>";
				}
				for ( i = 0; i < nbChamps; i++ ) {
					chaine += separateur + "<input type='text' id='enfant" + i + "'>";
					separateur = "</li><li>";
				}
				if ( nbChamps > 0 ) {
					chaine += "</li></ul>";
				}
				alert(chaine);
				document.getElementById("Champs").innerHTML = chaine;
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>Enfants</legend>
			Nombre d'enfants : 
			<input type="radio" name="nbEnfants" value="0" id="0Enfants" onClick="Saisir(0)"><label for="0Enfants">0</label>
			<input type="radio" name="nbEnfants" value="1" id="1Enfant" onClick="Saisir(1)"><label for="1Enfant">1</label>
			<input type="radio" name="nbEnfants" value="2" id="2Enfants" onClick="Saisir(2)"><label for="2Enfants">2</label>
			<div id="Champs"></div>
			</fieldset>
	</body>
</html>

++
Fred

ou ce principe: http://javatwist.imingo.net/ajouform.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
 
var c,c2;
function plus(){
c=document.getElementById('cadre');
c2=c.getElementsByTagName('input');
var ch=document.createElement('input');
 
ch.setAttribute('type','text');
ch.setAttribute('name','ch'+c2.length);
c.appendChild(ch);
 
document.getElementById('sup').style.display='inline';
}
 
function moins(){
if(c2.length>0){c.removeChild(c2[c2.length-1])}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}
 
</script>
 
<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>
 
<p>
<input type="button" value="ajouter un champ" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="supprimer un champ" onclick="moins()" />
</p>
</form>

13/04/2006, 15h41
petchos64

oui mai le but premier etait de faire sans bouton en saississant manuellement un nombre, pas grave au final me suis rabatu sur un bouton valider et une nouvelle page ... merci kan meme