Changer la valeur d'un bouton

Version imprimable

15/02/2012, 16h45
anto2b

Changer la valeur d'un bouton

Bonjour,

Dans mon formulaire html je possède deux boutons radio et un bouton d'envoi.

J'aimerais que la valeur du bouton d’envoi change en fonction du bouton radio sélectionné.

- Quand bouton radio 1 sélectionné -> valeur du bouton d'envoi : Bouton 1 sélectionné
- Quand bouton radio 2 sélectionné -> valeur du bouton d'envoi : Bouton 2 sélectionné

Merci de votre aide.

je te donne le code avec un select parceque les boutons radio ca me gonfle .... mais aprés c'est le même genre avec les radio, tu peux t'inspiré
Code:

1 2 3 4 5 6 <select onchange="document.getElementById('mon_bouton').value='Bouton ' + this.value +' sélectionné';"> <option value='1' selected>Valeur 1</option> <option value='2'>Valeur 2</option> </select> <input id="mon_bouton" type="button" value="Bouton 1 sélectionné">

Avec jQuery :pastaper:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>  
</head>
 
<body>
 
<TABLE id="myTable">
 
<body>
<input type="radio" id="radio_1" name="radios" onChange="$('#bt1').attr('value','Bouton 1 sélectionné')"> <label for="radio_1">bouton radio 1</label>
<br />
<input type="radio" id="radio_2" name="radios" onChange="$('#bt1').attr('value','Bouton 2 sélectionné')"> <label for="radio_2">bouton radio 2</label>
<br /><br />
</body>
 
<input id="bt1" type="button" value="Aucune valeur">
 
</html>

15/02/2012, 17h14
ticroch

Golgotha, ton évenement il ne se déclenche pas 2 fois la ? Parceque quand tu en sélectionne un, les valeurs de radio1 et de radio2 changent ?
15/02/2012, 17h27
Golgotha

Citation:

Envoyé par ticroch

Golgotha, ton évenement il ne se déclenche pas 2 fois la ? Parceque quand tu en sélectionne un, les valeurs de radio1 et de radio2 changent ?

non, par contre je ne sais pas pourquoi :aie:

intéressant...

Bonjour,
je ne pense pas que la bonne solution passe par le onchange, j'opterais plus volontiers pour le onclick, because pas sûr que suivant le navigateur le radio qui change soit celui qui reçoit le click, voire IE vs FF.

~~Dans le cas du onclick il suffit d'utiliser l'état checked~~

Un approche plus traditionnelle :D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[Modif button sur Radio checked]</title> <script type="text/javascript"> function changeValue( id_btn, texte){ var oBtn = document.getElementById( id_btn); if( oBtn){ oBtn.value = texte; } } </script> </head> <body> <input type="radio" id="radio_1" name="radios" onclick="changeValue( 'bt1', 'Bouton 1 sélectionné')"><label for="radio_1">bouton radio 1</label><br> <input type="radio" id="radio_2" name="radios" onclick="changeValue( 'bt1', 'Bouton 2 sélectionné')"><label for="radio_2">bouton radio 2</label><br> <input id="bt1" type="button" value="Aucune valeur"> </body> </html>
[edit]
pas besoin de test sur le checked, il l'est forcément sur le onclick:oops:
[edit]

16/02/2012, 08h21
ticroch

Citation:

je ne pense pas que la bonne solution passe par le onchange, j'opterais plus volontiers pour le onclick, because pas sûr que suivant le navigateur le radio qui change soit celui qui reçoit le click, voire IE vs FF.

C'est bien pour ca que je déteste les radio et que j'utilise plutot des select ....
Perso je trouve le onclick pas génial, j'utilise souvent uniquement le clavier pour remplir des formulaires, et du coup l'évènement ne se déclenche pas ....
17/02/2012, 15h06
NoSmoking

Citation:

Envoyé par ticroch

Perso je trouve le onclick pas génial, j'utilise souvent uniquement le clavier pour remplir des formulaires, et du coup l'évènement ne se déclenche pas ....

l'appui sur la touche espace valide le radio au même titre qu'un clic de mouse.
17/02/2012, 15h18
ticroch

oui c'est vrai je me suis trompé .....