Ajouter un champ dans un formulaire (classique)

Version imprimable

Bonjour,
j'ai un formulaire qui a pour nom form1 et je voudrais rajouter un champ si j'ai cliqué sur un bouton radio. J'ai donc utilisé une fonction de javascript qui me submit le formulaire sans que j'ai à appuyer sur le button valider .

Dans mon formulaire, j'ai testé l'existence de la variable POST associé au champ input de mon radio box. S'il existe, alors j'affiche mon champ (qui est un champ de type file pour upload un fichier), sinon je ne l'affiche pas.

Mais , quans je coche la radio box , rien ne se passe.

Voici mon code
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 echo" <form name='formu1' action='".$action_form."' method='post' > <label for='icone'> </icone> <table border='0'> <TR><th ><B>Numéro</B></th> <th> <input type='text' size='7' name='numero' value='".$numero."'></th></TR> <TR ><th> Voulez vous upload un fichier?</th> <th><input type='checkbox' name='nocturne' onclick='javascript: window.document.forms['formu1'].submit();'"; if (isset($_POST['nocturne'])) echo 'checked'; echo '>Oui'; if (isset($_POST['nocturne'])) echo " <TR ><th ALIGN='LEFT' COLSPAN='2'> <input type='file' name='file' size='20' onchange='javascript: window.document.forms['formu1'].submit();' > </th> </tr> <TR><th ALIGN='center' COLSPAN=2><font size='5'> <p align='center'> <input class='button' type='submit' value='Valider' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> <input class='button' type='reset' value='Effacer' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> </p> </th></TR> </table> </form>";
Merci

07/05/2007, 21h32
Ouach

En l'occurence, tu utilises un language à contre emploi. Pour schématiser, le javascript c'est pour tout ce qui concerne le client, le php c'est pour tout ce qui se passe sur le serveur. Or ici tu utilises le php pour faire un boulot typiquement sur le client. Utilise le javascript plutôt. D'ailleur que se passe-t-il quand tu cliques sur le bouton submit? Rien surement...
Quelques pistes:
Une balise de type input a un attribut qui s'appelle "visibility".
Il est possible, en javascript, de changer cet attribut en cliquant sur un input de type checkbox.

MErci bien

voici mon code pour les intéressés

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script language="javascript" type="text/javascript"> 
 
function ModifChamp()
{
	if (document.forms["form1"].checkbox.checked)
	{
		document.forms["form1"].champ_text.value='Bouton coché'
				document.forms["form1"].fichier.type='file'
 
 
	}
	else
	{
		document.forms["form1"].champ_text.value='bouton non coché'
						document.forms["form1"].fichier.type='hidden'
 
	}
}
</script>
<title>Untitled Document</title>
</head>
 
<body>
 
<form name="form1">
<br><input type="checkbox" name="checkbox" onClick="ModifChamp();return true;">
<br><input type='TEXT' name='champ_text' value='Essai du javascript' size='24'>
<br><input type='hidden' name='fichier' size='20'>
 
 
</form>
</body>
</html>

Et? Ca fonctionne? Il n'y a pas de bouton submit. Quand tu sélectionnes ta case à cocher, n'as tu pas une erreur à cause du changement de type?
Au lieu de changer le type pourquoi ne changerais-tu pas la visibilité?
Quelque chose comme : (Attention, je n'ai pas testé, c'est le principe que j'énonce ici)

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script language="javascript" type="text/javascript"> 
 
function ModifChamp()
{
	if (document.forms["form1"].checkbox.checked)
	{
		document.forms["form1"].champ_text.value='Bouton coché';
		document.getElementById("fichier").style.visibility='visible';
 
 
	}
	else
	{
		document.forms["form1"].champ_text.value='bouton non coché';
		document.getElementById("fichier").style.visibility='hidden';
 
	}
}
</script>
<title>Untitled Document</title>
</head>
 
<body>
 
<form name="form1">
  <input type="checkbox" name="checkbox" onClick="ModifChamp();return true;">
  <br><input type='TEXT' name='champ_text' value='Essai du javascript' size='24'>
  <br><input type='file' id="fichier" name='fichier' size='20'>
</form>
</body>
</html>

08/05/2007, 16h31
psgman113

En effet, il y avait une erreur sous le navigateur internet explorer mais ma méthode marchait sur mozzilla firefox,

ta méthode marche que sur internet explorer , il faut juste rajouter dans le code du formulaire concernant le champ fichier

Code:

style="visibility: hidden"
09/05/2007, 11h09
psgman113

Quelqu'un a t'il une solution qui marche sous internet explorer et mozilla firefox?

Merci
09/05/2007, 21h28
Ouach

1 Qu'est-ce qui se passe? Pourquoi cela ne fonctionne pas?
2 Peux-tu mettre le code?

Bonjour,
sous ie , mon champ parcourir apparait quand je clique sur le bouton radio
tandis que sous mozilla, il n'apparait pas .

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="javascript" type="text/javascript"> 
 
function ModifChamp1()
{
if (document.forms["form1"].checkbox1.checked)
	{
		document.getElementById("file1").style.visibility='visible';
 
 
	}
	else
	{
		document.getElementById("file1").style.visibility='hidden';
 
	}
	}
 </script> 
 
<title>Untitled Document</title>
</head>
 
<body>
 
 
<?php
 
 
echo"
<form name='form1' action='recupfiletest.php' method='post'   onsubmit='return validation();'>

  <table border='1' cellpadding='3' cellspacing='1' align='center'  >

<TR  ><th ALIGN='center'>
Voulez vous upload un fichier?</th>
<th>Oui<input type='checkbox'  name='checkbox1' onClick='ModifChamp1();return true;'>
<input type='file1' style='visibility: hidden' name='file1'  size='20'></th></tr> 

<TR><th ALIGN='center'  COLSPAN=2><font size='5'>
<p align='center'> <input class='button' type='submit' value='Valider' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> 
<input class='button' type='reset' value='Effacer' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> </p>
</table>

</form>";
?>
 
 
</body>
</html>

Essaie ceci:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="javascript" type="text/javascript"> 
function ModifChamp1()
{
  if (document.getElementById("checkbox1").checked)
	{
		document.getElementById("file1").style.visibility='visible';
	}
	else
	{
		document.getElementById("file1").style.visibility='hidden';
	}
}
 </script> 
 
<title>Untitled Document</title>
</head>
 
<body>
<form name='form1' action='recupfiletest.php' method='post'   onsubmit='return validation();'>
 
  <table border='1' cellpadding='3' cellspacing='1' align='center'  >
 
<TR  ><th ALIGN='center'>
Voulez vous upload un fichier?</th>
<th>Oui<input type='checkbox'  id='checkbox1'  name='checkbox1' onClick='ModifChamp1();'>
<input type='file1' style='visibility: hidden' id='file1' name='file1'  size='20'></th></tr> 
 
<TR><th ALIGN='center'  COLSPAN=2>
<p align='center'> <input class='button' type='submit' value='Valider' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> 
<input class='button' type='reset' value='Effacer' style='font:Verdana,Helvetica;font-size: 17px;background-color:#FFFFFF;color: #3B46BF;'> </p>
</th></tr></table>
 
</form>
</body>
</html>

14/05/2007, 17h21
psgman113

Merci 8-)