High-Tech Santé Médecine Droit-Finances

Télécharger

MSN 2009

Rechercher : dans
Par :

Javascript champs liés / bouton radio

Dernière réponse le 12 jan 2009 à 19:25:02 almi, le 12 jan 2009 à 10:57:42 
 Signaler ce message aux modérateurs

Bonjour,

Voici mon code HTML : 

<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">
    oui 
    <input type="radio" name="duplication" id="duplication" value="non">
    non<br>
    champ destination <input type="text" name="destination" id="destination"> 
</form>


Voilà ce que j'aimerai faire :
Dupliquer le contenu du champ "source" dans le champ destination, et ce, en fonction des boutons radio "duplication".
Exemple : je remplis le champ "source", ensuite je sélectionne un des radios "duplication", si je choisis "oui", le contenu du champ source se duplique dans le champ "destination". Si je choisis "non" pour le champ "duplication", le champ "destination" se vide.

Je sais que cela doit se faire en javascript mais cela m'est complètement flou.
Pouvez-vous m'aider ?

Merci beaucoup
Configuration: Windows Vista
Firefox 3.0.5

Posez votre question Répondre

1

Keanjyto, le 12 jan 2009 à 11:50:48

Salut Almi,

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. "Qui aime bien châtie bien" : Windows XP devait vraiment m'adorer alors...

   
Répondre à Keanjyto

2

almi, le 12 jan 2009 à 12:01:15

Merci beaucoup Keanjyto,

Cela fonctionne parfaitement ;-)

Et si je veux exactement le même principe avec plusieurs champs sources et plusieurs champs destinations ?

   
Répondre à almi

3

Keanjyto, le 12 jan 2009 à 12:12:47

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>
"Qui aime bien châtie bien" : Windows XP devait vraiment m'adorer alors...

   
Répondre à Keanjyto

4

almi, le 12 jan 2009 à 13:39:49

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 : 

<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

   
Répondre à almi

5

almi, le 12 jan 2009 à 15:24:45

Voilà, j'ai trouvé : 

<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 ;-)

   
Répondre à almi

6

 Keanjyto, le 12 jan 2009 à 19:25:02
  • +1

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 :

<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 :
--> "http://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. "Qui aime bien châtie bien" : Windows XP devait vraiment m'adorer alors...

   
Répondre à Keanjyto
Posez votre question Répondre
Ils ont besoin de votre aide