Javascript champs liés / bouton radio
Résolu/Fermé
A voir également:
- Javascript champs liés / bouton radio
- Radio française - Télécharger - Médias et Actualité
- Telecharger javascript - Télécharger - Langages
- Réinitialiser chromecast sans bouton - Guide
- Retrouver une pub radio - Forum Musique / Radio / Clip
- Écouter la radio freebox pop - Forum Freebox
6 réponses
Utilisateur anonyme
12 janv. 2009 à 19:25
12 janv. 2009 à 19:25
De rien ^^ (désolé j'ai dû partir avant la fin).
Tu peux même aller plus loin et utiliser du CSS pour mettre en forme ta page :
- "input[type=text]" défini le style pour tout les éléments input de type 'text'
- lorsque l'on rajoute ':hover', à un élément, cela permet de lui définir un style lorsqu'il est survolé avec la souris.
La mise en page avec le CSS est très pratique et permet de faire de très belles interfaces, si tu es intéressé tu peux avoir plus d'infos sur le CSS (sa syntaxe...) ici :
--> "https://www.cssdebutant.com/"
Si tu as des question sur le fonctionnement de ce code, je t'écoute ;)
Sinon, bonne continuation pour la suite ^^
Cordialement,
Keanjyto.
Tu peux même aller plus loin et utiliser du CSS pour mettre en forme ta page :
<html> <head> <title>Test javascript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #F0F0F0; color: black; } input[type=text] { border: 1px solid #C7C7C7; width: 150px; color: green; margin: 2px; } input[type=text]:hover { border: 1px solid black; width: 150px; color: green; background-color: #FFEEFF; margin: 2px; } </style> <script type="text/javascript"> function foncabc() { document.getElementById('destination1').value=document.getElementById('source1').value; document.getElementById('destination2').value=document.getElementById('source2').value; } function foncdef() { document.getElementById('destination1').value=""; document.getElementById('destination2').value=""; } </script> </head> <body> <form method="post" action="form"> champ source 1 <input type="text" name="source1" id="source1" onfocus="javascript:this.style.backgroundColor='#EEFFEE';" onblur="javascript:this.style.backgroundColor='white';"><br> champ source 2 <input type="text" name="source2" id="source2" onfocus="javascript:this.style.backgroundColor='#EEFFEE';" onblur="javascript:this.style.backgroundColor='white';"> <br><br> duplication : <input type="radio" name="duplication" id="duplication1" value="oui" onclick="foncabc();"> oui <input type="radio" name="duplication" id="duplication2" value="non" onclick="foncdef();"> non<br> <br> champ destination 1 <input type="text" name="destination1" id="destination1"><br> champ destination 2 <input type="text" name="destination2" id="destination2"> </form> </body> </html>Explications :
- "input[type=text]" défini le style pour tout les éléments input de type 'text'
- lorsque l'on rajoute ':hover', à un élément, cela permet de lui définir un style lorsqu'il est survolé avec la souris.
La mise en page avec le CSS est très pratique et permet de faire de très belles interfaces, si tu es intéressé tu peux avoir plus d'infos sur le CSS (sa syntaxe...) ici :
--> "https://www.cssdebutant.com/"
Si tu as des question sur le fonctionnement de ce code, je t'écoute ;)
Sinon, bonne continuation pour la suite ^^
Cordialement,
Keanjyto.
Utilisateur anonyme
12 janv. 2009 à 11:50
12 janv. 2009 à 11:50
Salut Almi,
si j'ai bien compris ce que tu tentes de réaliser, alors ce code sera parfait :
Cordialement,
Keanjyto.
si j'ai bien compris ce que tu tentes de réaliser, alors ce code sera parfait :
<form method="post" action="form"> champ source <input type="text" name="source" id="source"> <br> duplication : <input type="radio" name="duplication" id="duplication" value="oui" onclick="javascript:document.getElementById('destination').value=document.getElementById('source').value"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="javascript:document.getElementById('destination').value=''"> non<br> champ destination <input type="text" name="destination" id="destination"> </form>Les évènements en javascript sont très utiles pour ce genre d'interface dynamique. Tu peux te renseigner avec Google car 'onclick' n'est pas le seul évènement javascript qui existe ;)
Cordialement,
Keanjyto.
Merci beaucoup Keanjyto,
Cela fonctionne parfaitement ;-)
Et si je veux exactement le même principe avec plusieurs champs sources et plusieurs champs destinations ?
Cela fonctionne parfaitement ;-)
Et si je veux exactement le même principe avec plusieurs champs sources et plusieurs champs destinations ?
Utilisateur anonyme
12 janv. 2009 à 12:12
12 janv. 2009 à 12:12
Dans ce cas là, il te suffira de jouer sur les 'id', avec un exemple ça passera plus facilement je pense :
<form method="post" action="form"> champ source <input type="text" name="source" id="source"> <br> duplication sur <u>le champ 1</u> : <input type="radio" name="duplication" id="duplication" value="oui" onclick="javascript:document.getElementById('destination1').value=document.getElementById('source').value"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="javascript:document.getElementById('destination1').value=''"> non<br> duplication sur <u>le champ 2</u> : <input type="radio" name="duplication" id="duplication" value="oui" onclick="javascript:document.getElementById('destination2').value=document.getElementById('source').value"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="javascript:document.getElementById('destination2').value=''"> non<br> champ destination 1 <input type="text" name="destination" id="destination1"> champ destination 2 <input type="text" name="destination" id="destination2"> </form>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je cherche plus précisément à faire ce genre de chose, j'ai fait deux tests ci dessous mais ça ne fonctionne pas
TEST 1 :
TEST 2 (avec fonction) :
Je pense ne plus être très loin, pourrais-tu me donner un dernier coup de pouce
Merci d'avance
TEST 1 :
<form method="post" action="form"> champ source 1 <input type="text" name="source1" id="source1"><br> champ source 2 <input type="text" name="source2" id="source2"> <br><br> duplication : <input type="radio" name="duplication" id="duplication" value="oui" onclick="javascript:document.getElementById('destination1').value=document.getElementById('source1').value;javascript:document.getElementById('destination2').value=document.getElementById('source2').value"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="javascript:document.getElementById('destination1').value=''"> non<br> <br> champ destination 1 <input type="text" name="destination1" id="destination1"> <br> champ destination 2 <input type="text" name="destination2" id="destination2"> </form>
TEST 2 (avec fonction) :
<script language="JavaScript"> fonction() { document.getElementById('destination1').value=document.getElementById('source1').value; document.getElementById('destination2').value=document.getElementById('source2').value; } </script> <form method="post" action="form"> champ source 1 <input type="text" name="source1" id="source1"><br> champ source 2 <input type="text" name="source2" id="source2"> <br><br> duplication : <input type="radio" name="duplication" id="duplication" value="oui" onclick="fonction()"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="javascript:document.getElementById('destination1').value=''"> non<br> <br> champ destination 1 <input type="text" name="destination1" id="destination1"> <br> champ destination 2 <input type="text" name="destination2" id="destination2"> </form>
Je pense ne plus être très loin, pourrais-tu me donner un dernier coup de pouce
Merci d'avance
Voilà, j'ai trouvé :
Merci à toi Keanjyto ;-)
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> function foncabc() { document.getElementById('destination1').value=document.getElementById('source1').value; document.getElementById('destination2').value=document.getElementById('source2').value; } function foncdef() { document.getElementById('destination1').value=""; document.getElementById('destination2').value=""; } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <form method="post" action="form"> champ source 1 <input type="text" name="source1" id="source1"><br> champ source 2 <input type="text" name="source2" id="source2"> <br><br> duplication : <input type="radio" name="duplication" id="duplication" value="oui" onclick="foncabc();"> oui <input type="radio" name="duplication" id="duplication" value="non" onclick="foncdef();"> non<br> <br> champ destination 1 <input type="text" name="destination1" id="destination1"> <br> champ destination 2 <input type="text" name="destination2" id="destination2"> </form> </body> </html>
Merci à toi Keanjyto ;-)