Comment Créer champ INPUT dans la meme page

**petchos64** · 11/04/2006, 11h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**10-nice** · 11/04/2006, 11h41

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

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?

**petchos64** · 11/04/2006, 12h05

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

**MasterOfChakhaL** · 11/04/2006, 12h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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à"...

**fred777888999** · 11/04/2006, 13h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 11/04/2006, 20h28

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**petchos64** · 13/04/2006, 16h41

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

Comment Créer champ INPUT dans la meme page

JavaScript

Discussions similaires

Partager

Partager