[?] Formulaire alternatif ! Qui apparauit suivant une option choisie !

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [?] Formulaire alternatif ! Qui apparauit suivant une option choisie !

rainckill

j'ai une page formulaire.php, avec, bien sur un formulaire Je souhaiterai que des option apparaisse si au préalable on a choisi "oui" a une case radio (si "non" qu'il affiche pas ces champs)...

Enfin, je parle la d'une case radio, mais ca peut etre une liste déroulante, and co... Mais, comment faire cela ? Je suppose avec du javascript ? Mais je connais aps ce langage, si c'est simple, quelqu'un pourrais t'il me donner le code ?

Merci :hello:

Publicité

walli

Tu mets les champs que tu veux voir apparaitre ou non dans des div.

ex dans un tableau :

Code :

<div id="informationLayer">
<table>
<tr>
<td>information...</td>
</tr>
</table>
</div>

ensuite, dans ta case radio ou dans ta combo, tu appelles une fonction ex : 'afficheInfo()'

et dans ta fonction tu fais un truc du genre
<script>
function afficheInfo()
{
suivant valeur..
document.getElementById"informationLayer" ).style.display="none";
ou
document.getElementById"informationLayer" ).style.display="";
}
</script>

Message édité par walli le 03-02-2003 à 21:14:04

rainckill

Enfait voila mon cas exactement :

Je veux afficher TOUT les formulaires au départ (avec l'imput déterminant sélectionné par défault pour "oui" ), mais, si ce derneir est changé pour "non", alors, il supprime 2/3 champs du formulaire...

Etant un vrai n00bs en javascript, je peux pas me servir de ton code walli, mais meric pour ta partiipation, jvé essayer de comprnedre qd meme :whistle:

walli

rainckill a écrit :

On peut y aller petit à petit si tu veux en regardant un peu ton code !

rainckill

walli a écrit :

On peut y aller petit à petit si tu veux en regardant un peu ton code !

Oki, merci bien :jap:
Donc, enfait, c'est un code tous simple de formulaire html :

Code :

<FORM ENCTYPE="multipart/form-data" action="uploadimg.php" method="post">
<b>Uploader une image !</b><br>
<table cellpadding='0' cellspacing='0'>
<tr><td>Faire profiter de ce fichier :</td>
<td><input type="radio" name="profite" value="oui" checked> oui <input type="radio" name="profite" value="non"> non</td></tr>
<tr><td>Nom de l'image :</td>
<td><input type="text" name="nomimg" size="20"></td></tr>
<tr><td>Catégorie<br><font size="1">(à ignorer si vous avez répondu "non" précédemment) </font></td>
<td><select name="catimg">
<option value="vide"> ------- Choisissez -------</option>
<option value="Adulte"> Adulte</option>
<option value="Jeux"> Jeux</option>
<option value="Film/Anime"> Film/Anime</option>
<option value="Sport"> Sport</option>
<option value="Autre"> Autre</option>
</select>
</td></tr>
<tr><td>Chemin du fichier :</td>
<td><INPUT NAME="userimg" TYPE="file"></td></tr>
<tr><td><center><input type="submit" value="Envoyer !"></center></td></tr>
</table>

scuz, ia des table, td, et tr :-/

Bon, comme tu le voit, le radio est sur "oui"... => il y a els champs nomimg, et catimg qui apparaisse... par contre, j'aimerai que sie un membre choisisse "non" finalement, les champs cat (select) et nom (imput type text) disparaisse...

walli

Voilà, ça va te donner qqchose dans le genre !

Code :

<html>
<head>
<script language="JavaScript" >
function visible()
{
document.getElementById("layer" ).style.display="";
}
function invisible()
{
document.getElementById("layer" ).style.display="none";
}
</script>
</head>
<body>
<table cellpadding='0' cellspacing='0'>
<tr><td>Faire profiter de ce fichier :</td>
<td>
<input type="radio" name="profite" value="oui" checked onclick="visible();"> oui <input type="radio" name="profite" value="non" onclick="invisible()";> non</td></tr>
<tr><td>
<div id="layer"><table><tr><td>Nom de l'image :</td>
<td><input type="text" name="nomimg" size="20"></td></tr>
<tr><td>Catégorie<br><font size="1">(à ignorer si vous avez répondu "non" précédemment) </font></td>
<td><select name="catimg">
<option value="vide"> ------- Choisissez -------</option>
<option value="Adulte"> Adulte</option>
<option value="Jeux"> Jeux</option>
<option value="Film/Anime"> Film/Anime</option>
<option value="Sport"> Sport</option>
<option value="Autre"> Autre</option>
</select>
</td></tr>
<tr><td>Chemin du fichier :</td>
<td><INPUT NAME="userimg" TYPE="file"></td></tr>
<tr><td><center><input type="submit" value="Envoyer !"></center></td></tr></table>
</div></td></tr>
</table>
</body>
</html>

je sais pas exactement ce que tu veux cacher, mais ça te donnera une idée du code.

rainckill

Oki, ca amrche impecable, merci ! j'ai un peu modifier le code mais la, c'est nickel ^^

merci wally ^^

fbthereturn

excusez moi...

Comment on peut faire la meme chose avec un bouton checkbox?
car la, c'est pas une case oui et une case non
mais la meme case oui ou non en fonction de la valeur que c'était...
J'ai essayé plusieurs trucs de "débrouille" mais ça ne marche pas...
Pouvez vous m'aider?

fbthereturn

c'est correct ça au niveau de la syntaxe?
merci :-)

Code :

<html>
<head>
<script language="JavaScript" >
function visible()
{
document.getElementById("layer" ).style.display="";
}
function invisible()
{
document.getElementById("layer" ).style.display="none";
}
function affichage()
{
if (document.formulaire.entreprise.checked) invisible()
else visible();
}
</script>
</head>
<body>
<form name="formulaire">
<table cellpadding='0' cellspacing='0'>
<td>Je m'inscris au nom d'une entreprise :</td>
<td> <input type="checkbox" name="entreprise" onclick="affichage();"
<? if($entreprise=="1" ) echo "CHECKED"; ?>
value="1" /></td>
<tr><td>
<div id="layer"><table>
<tr>
<td>Nom entreprise:</td>
<td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
</tr>
</table>
</div></td></tr>
</table>
</form>
</body>
</html>

walli

fbthereturn a écrit :

tu mets une id différente pour chacun de tes boutons checkbox.
et sur les évènements OnClick ou OnChange de tes checkbox, tu appelles une fonction unique.
dans ta fonction, tu regardes la valeur de ta checkbox (checked ou pas) et suivant la valeur tu vas cacher ou afficher les champs que tu veux.
ex :
une checkbox qui a pour id : 'checkbox1'
et deux champs qui ont pour id 'champ1' et 'champ2'
dans ta méthode :

Code :

if document.getElementById('checkbox1').checked='true'
{
document.getElementById('champ1').style.display="";
document.getElementById('champ2').style.display="none";
}

Publicité

fbthereturn

je n'ai pas bien compris pour les champs.. à quoi ils correspondent...

mais j'ai fait ça:
et le problème c'est que je ne peux cliquer qu'une fois
ensuite, le bouton checkbox reste bloqué sur "sélectionné"

Code :

<html>
<head>
<script language="JavaScript" >
function visible()
{
document.getElementById("layer" ).style.display="";
}
function invisible()
{
document.getElementById("layer" ).style.display="none";
}
function affichage()
{
if (document.getElementById("essai" ).checked='true') invisible()
else visible();
}
</script>
</head>
<body>
<form name="formulaire">
<table cellpadding='0' cellspacing='0'>
<td>Je m'inscris au nom d'une entreprise :</td>
<td> <input type="checkbox" id="essai" name="entreprise" onclick="affichage();"
<? if($entreprise=="1" ) echo "CHECKED"; ?>
value="1" /></td>
<tr><td>
<div id="layer"> <table>
<tr>
<td>Nom entreprise:</td>
<td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
</tr>
</table>
</div></td></tr>
</form>
</body>
</html>

El_gringo

Essaye avec

Code :

function affichage()
{
if (document.getElementById("essai" ).checked=='true') invisible()
else visible();
}

fbthereturn

c'est bon, dans le javascript, il ne faut pas mettre le ".checked='true'"
juste ".checked"

désolé, je ne connais pas le javascript

fbthereturn

Je suis vraiment embetant:

Toutes les solutions marchaient a part
mais je n'arrive pas à l'integrer dans mon grand formulaire...

regarder mon formulaire...
vous pouvez faire copier coller pour l'essayer :
Tous les champs à partir du choix "vous vous inscrivez au nom d'une entreprise" ne sont plus alignés (désolé, je n'y arrive pas)

et le champ "nom de l'entreprise" ne disparait pas au click... :-(

Code :

<html>
<head>
<title>Sans Titre</title>
</head>
<body bgcolor="#FFFFFF">
<script language="Javascript">
function visible()
{
document.getElementById("layer" ).style.display="";
}
function invisible()
{
document.getElementById("layer" ).style.display="none";
}
function changeaffichage()
{
if (document.getElementById("bouton" ).checked) invisible()
else visible();
}
</script>
<form action="?" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Nom :</td>
<td><input type="text" name="nom" value="<?php echo $nom ?>"></td>
</tr>
<tr>
<td>Prénom :</td>
<td><input type="text" name="prenom" value="<?php echo $prenom ?>"></td>
</tr>
<tr>
<td>Adresse :</td>
<td><input type="text" name="adresse" value="<?php echo $adresse ?>"></td>
</tr>
<tr>
<td>Code postal :</td>
<td><input type="text" name="code_postal" value="<?php echo $code_postal ?>"></td>
</tr>
<tr>
<td>Ville :</td>
<td><input type="text" name="ville" value="<?php echo $ville ?>"></td>
</tr>
<tr>
<td>Pays :</td>
<td>
<select name="pays" size="1">
<option value="france" <?php if($pays=="france" ) echo "SELECTED";?> >France </option>
<option value="zone1" <?php if($pays=="zone1" ) echo "SELECTED";?>>europe proche</option>
<option value="zone2" <?php if($pays=="zone2" ) echo "SELECTED";?>>europe lointaine</option>
<option value="zone3" <?php if($pays=="zone3" ) echo "SELECTED";?>>pays hors europe</option>
</select>
</td>
</tr>
<tr>
<td>Je m'inscris au nom d'une entreprise :</td>
<td> <input id="bouton" type="checkbox" name="entreprise" onclick="changeaffichage();"
<? if($entreprise=="1" ) echo "CHECKED"; ?>
value="1" /></td>
</tr>
<div id="layer"><table>
<tr>
<td>Nom entreprise:</td>
<td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
</tr>
</table>
</div>
<tr>
<td>Je m'inscris à la newsletter de cette boutique :</td>
<td> <input type="checkbox" name="mailing_list"
<? if($mailing_list=="1" ) echo "CHECKED"; ?>
value="1" /></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" name="email" value="<?php echo $email ?>"></td>
</tr>
<tr>
<td>Mot de passe :</td>
<td><input type="password" name="mot_de_passe" value="<?php echo $mot_de_passe?>"="10" maxlength="10" /></td>
</tr>
<tr>
<td>Veuillez reécrire le Mot de passe :</td>
<td><input type="password" name="mot_de_passe1" value="<?php echo $mot_de_passe1?>"="10" maxlength="10" /></td>
</tr>
<tr>
<td>Téléphone personnel:</td>
<td><input type="text" name="tel_perso" value="<?php echo $tel_perso ?>"></td>
</tr>
<tr>
<td>Téléphone autre:</td>
<td><input type="text" name="tel_autre" value="<?php echo $tel_autre ?>"></td>
</tr>
<tr>
<td>Télécopie :</td>
<td><input type="text" name="telecopie" value="<?php echo $telecopie ?>"></td>
</tr>
<tr>
<td><input type="submit" name="envoyer" value="soumettre !">
<input type="Reset" name="effacer" value="effacer">
</td>
</tr>
</table>
</form>
</body>
</html>

Message édité par fbthereturn le 07-03-2003 à 11:40:22

fbthereturn

c un probleme avec <div id="layer">
quand je le mets dans la zone texte de l'entreprise, ça marche, ça enleve bien la zone text...
(mais pas le texte "nom de l'entreprise"...

c'est peut etre pas div qu'il faut utiliser..?

walli

fbthereturn a écrit :

si faut utiliser le div.
le probleme avec le div, c'est qu'il (je crois) doit englober une table pour que ca fonctionne.
il faudrait peut etre utiliser des tables imbriquees pour une meilleure presentation.
sinon, tu n'as pas besoin d'appeller une fonction qui appelle deux autres fonctions tu peux tout faire dans ta fonction changeaffichage() :

Code :

function changeaffichage()
{
if (document.getElementById("bouton" ).checked=='true')
document.getElementById("layer" ).style.display="";
else
document.getElementById("layer" ).style.display="none";
}

fbthereturn

ok c resolu, il fallait mettre un </table> juste avant la balise div...

trop merci en tout cas pour le code :-)

et Par défaut pour que le champs "nom entreprise " ne soit pas affiché, il faut faire quoi?

walli

fbthereturn a écrit :

tu rajoutes ca dans ta balise :
style='display:"none"'

fbthereturn

trop trop trop merci walli, ça marche!!!!

grace à vous je peux aller manger tranquille :-)

merci à tous :-)

FORUM HardWare.fr

Programmation

HTML/CSS

[?] Formulaire alternatif ! Qui apparauit suivant une option choisie !

Sujets relatifs
Apostrophe (formulaire- php)	Questions "Formulaire" et pop-up
Id suivant, id précédent ..	mes valeurs renvoyer par 1 formulaire sont vide !!!!!
[access] champs texte dans un sous formulaire ?!?	formulaire :--> upload d'un fichier image
[html] validation de formulaire lorsqu'on presse entrer	(VBA) Formulaire travaillant avec une table et recherche
[ACCESS] Protéger l'acces à un formulaire (par mot de passe...) ?	Réaction inatendue d'un formulaire
Plus de sujets relatifs à : [?] Formulaire alternatif ! Qui apparauit suivant une option choisie !

Page générée en 0.151 secondes