Sujet Précédent Sujet Suivant

Javascript champs liés / bouton radio

Résolu/Fermé
almi - 12 janv. 2009 à 10:57
 Utilisateur anonyme - 12 janv. 2009 à 19:25
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
A voir également:

6 réponses

Réponse 1 / 6
Utilisateur anonyme
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 :
<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.
1
Réponse 2 / 6
Utilisateur anonyme
12 janv. 2009 à 11:50
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.
0
Réponse 3 / 6
almi
12 janv. 2009 à 12:01
Merci beaucoup Keanjyto,

Cela fonctionne parfaitement ;-)

Et si je veux exactement le même principe avec plusieurs champs sources et plusieurs champs destinations ?
0
Réponse 4 / 6
Utilisateur anonyme
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
almi
12 janv. 2009 à 13:39
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
0
Réponse 6 / 6
almi
12 janv. 2009 à 15:24
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 ;-)
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
Trouver la radio sur freebox poo
Cam -
bazfile -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses