124 en ligne Comparateur | Sites | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  

 Recherche

 Newsletter





 

Rendre Visible ou Invisible des éléments d'un form

Code JavaScript par DB77



  <Accueil>  Déjà 692 codes ! 
AJAX [5]AS 2.0 [1]ASP [111]ASP.NET [34]CSharp [11]CSS [14]
D [1]Delphi [5]DHTML [3]Divers [5]HTML [16]JavaScript [154]
JSP [9]Maths [1]PHP [254]PHP5 [18]PowerShell [22]Regex [4]
SQL [2]V.Basic [4]VBScript [11]VS.NET [5]WPF [1]XML [1]



DB77JavaScript - Rendre Visible ou Invisible des éléments d'un form

Suite à une question sur le forum et donc fidèle à mes habitudes, voici un petit bout de code, que vous pourrez bien sûr adapter à vos besoins, qui permet de rendre visible ou invisible un élément d'un formulaire.
Dans cet exemple, j'ai utilisé un tableau dans lequel j'ai mis l'élément "manipulé" dans une cellule de ce tableau mais chacun voyant midi à sa porte... :)

JavaScript
Pour pouvoir le télécharger, connectez-vous ! ;)
<html>
<head>
<script language="JavaScript">
// DB77 - Denis Blomme - Code qui rend visible ou invisible
function test()
{
obj=document.getElementById("ip").style;
if(document.choix.id.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';}
}
</script>

</head>
<body>
<form action="votre-page" method="post" name="choix"><table>
<tr><td>Câble reseau: <input name="id" type="checkbox" value="1" onClick="test()" >Oui</td>
<td><div id="ip" style="visibility: hidden">
Adresse IP : <input name="adrIP" type="text" size="20">
</div></td></tr>
<tr><td colspan=2>
<input type="submit" value="Envoyer"></td></tr></table>
</form>
</body>
</html>

Proposé par DB77 le 26/08/2008 [vu 9869 fois]
Commentaires
php_nuke
php_nuke
09/09/08

merci bq ca marche trés bien
php_nuke
php_nuke
09/09/08

merci pour le code mais moi je veux faire des button radio lorsque je selectionne que je suis chef dentreprise le champ text doit etre afficher si je suis porteur porjet il doit etre invisible
<script language="JavaScript">
function test()
{
obj=document.getElementById("ip").style;
if(document.choix.id.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';}
}
</script>
</head>
<body>
<form action="votre-page" method="post" name="choix"><table width="443">
<tr> <td colspan="2">Vous êtes:</td> </tr><tr> <td colspan="2">
    <p>chef dentreprise:
      <input name="id" type="radio" value="1" onClick="test()" >Porteur projet
        <input name="id" type="radio" value="1" >
    </p>
     <div id="ip" style="visibility: hidden">
    <p>raison social:
    
      <input name="adrIP" type="text" size="20">
      </div></p>
    </td> </tr><tr><td colspan=2>
<input type="submit" value="Envoyer"></td></tr></table>
</form>
DB77
DB77
09/09/08

Les boutons radio sont numérotés, il faut alors tester celui qui t'intéresse :
if(document.choix.id[0].checked==true){

0 : le premier bouton radio appelé id
1 : le deuxième bouton radio appelé id
2 : le troisième bouton radio appelé id
etc.
lhamo
lhamo
05/10/08

Bonojur, je suis totalement profane en asp. Ce bout de code va beaucoup m'aider car je suis en train de créer un formulaire, mais quelle est l'attribut à déclarer pour le cas d'un menu déroulant dont la sélection va faire apparaitre un nouveau champ ? J'imagine que ce n'est pas Onclick mais autre chose...
DB77
DB77
05/10/08

Ta question est trop spécifique car tout dépend comment est fait le menu déroulant et avec quoi.
Il peut très bien, comme c'est le cas sur ce site, afficher un menu si tu déjà inscrit par exemple. Et là, c'est lors de la création du menu que c'est fait et non comme expliqué dans mon bout de code.
Donc, je ne peux pas te répondre.
lhamo
lhamo
05/10/08

J'ai un peu de mal à comprendre ta réponse en dehors de la première phrase. Dans le doute je me permet de te spécifier que je construis ce formulaire en html, si ça peut éclairer tes lumières ! Le champ concerné est ainsi :

<select name="option" size="1">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
          </select>
DB77
DB77
05/10/08

Ok, mais il faut trouver un événement sur lequel tu rendras visible ou invisible ton menu. Et lequel ?
azzeddine_f
azzeddine_f
15/10/08

merci popur le code
diice
diice
18/12/09

Bonjour j'ai le meme probleme que lhamo.

j'ai un >select<, et dedans une des values doit faire apparaitre un <input type text>.

et j'arrive a rien !
ca ne marche que quand je met l'evenement sur le <select> pas sur l'<option>

est-il possible de mettre en evenement sur un <option> ?
et si oui, comment ?
merci d'avance pour votre réponse :)
DB77
DB77
18/12/09

Il ne faut pas tout mélanger et utiliser chaque module pour ce à quoi il a été conçu.
Pour ajouter des options à un select effectuez une recherche sur le site en utilisant les bons mots clefs (liste déroulantes dépendantes par exemple). Et si cela ne donne rien il existe sur ce site de nombreux exemples qui illustrent ce concept.
DB77
DB77
18/12/09

Regardez le bout de code que j'ai fait et qui s'appelle "D'un select à l'autre". Il vous servira pour développer ce que vous voulez faire. Il est dans la partie Javascript.

Pour participer, il faut d'abord vous identifier !
284 visiteurs ont déjà participé dont :
DB77 [47]fmarie [26]Fabrice69 [25]CedX [23]Didier [22]
Bisou [20]tedheu [20]mohman [17]jreaux62 [16]romuluslepunk [15]
foxmaster [15]Vonscott [12]iubito [10]Redo [9]Balin [8]
poppy [7]fmaunier [6]cyrillus [6]pseudomenace [6]CrazyCat [5]
antoun [5]Pozzy [5]TBliss [5]Aurelien [5]daoudi [5]
Ours [5]bahdot [5]david96 [5]houcem_tsp [4]Chrigou [4]
debackp [4]lex [4]hyoucef [4]Jips [4]zut69 [3]
salem [3]berguerand01 [3]phenixbd [3]twins20 [3]kandal [3]
mhaido [3]mcorgnet [3]philouonline [3]master-killer [3]Maclearner [3]
crocxx [3]laetyboop [3]Poucet [3]olivierland94 [3]

Didier Gratuit !!! Téléchargez la Beta d'Office 2010 !
35% de réduction sur Windows 7 !

Au fil des news  
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...
Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1
JavaScript - Ajouter une page dans vos favorites
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 -
Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ...
SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint
Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ...
Magazines - Le n°126 de Programmez est disponible
Outils - Traducteur en ligne automatique pour site web
Adobe - Adobe Photoshop.com Mobile pour Iphone
Magazines - Le n°125 de Programmez est disponible
Adobe - Adobe AIR 2 et Flash Player 10.1version bêta
Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements
Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ...
Magazines - Le n°124 de Programmez est disponible
PHP - Forum PHP 2009
Composants - eFace - XAML en Java
WPF - Désactiver le bouton de réduction d'une fenêtre
Magazines - Le n°123 de Programmez est disponible
Magazines - Le n°122 de Programmez est disponible
Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint
Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ...
SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0
Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ...
Magazines - Le HS N° 1 de Web Design est disponible
Adobe - Adobe propose en Open Source les frameworks.....
Outils - EntityBuilder
CSharp - Sérialisation XML de vos objets
Magazines - Le n°121 de Programmez est disponible
Adobe - Adobe annonce MAX 2009 !
Outils - WhoIs
[MAJ] Dreamweaver MX + Php + MySql - Les formulaires - partie 3
Mise à jour du code, par DB 77, affichage du code erreur, dans la page erreur.php, traduction des ...
PHP - News avec photo - Système de gestion - affichage
Gestion - Administration - Affichage d'une "News", "Actualité", "Info", ... avec : - mise en forme ...
Outils - Crypt
Dreamweaver Php Mysql - Région répétée imbriquée
Je rebondis, sur un post du forum, pour vous montrer comment obtenir grâce à l'extension Simulated ...
Magazines - Le n° 120 de Programmez est disponible
Gérer les bases de contenu SharePoint - Gérer la croissance du volume des données
Dans le cadre de la gestion quotidienne de ferme SharePoint, il existe une partie qu'il faut ...
PHP - Le Coach PHP sur Visual Studio
.NET - Ecrire une application .NET utilisant MySQL
PHP - Utilisation de PHP dans le monde Microsoft
Magazines - Le n° 119 de Programmez est disponible
Adobe - Adobe annonce Photoshop Marketplace
[MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
Mis à jour le 20/04/2009
Captcha «maison» sans extension - Et en plus, c'est gratuit ;)
Un ami m'a demandé de l'aide ce matin pour insérer un captcha dans un formulaire pour son site ...
Dreamweaver CS4 - Photoshop CS4 - Alliance parfaite pour la gestion des images
Pour changer un peu des pages de code, je vous propose de voir ensemble, la fonctionnalité très ...
  Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats | Recherches
v4.3 © Didier YVER
2001-2010
 
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
DotNet Project TechNet ASP-magazine MVP Groupes Utilisateurs Microsoft