Changer la valeur d'un bouton

**anto2b** · 15/02/2012, 16h45

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.

**ticroch** · 15/02/2012, 17h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é">

**Golgotha** · 15/02/2012, 17h09

Avec jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**ticroch** · 15/02/2012, 17h14

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 ?

**Golgotha** · 15/02/2012, 17h27

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

intéressant...

**NoSmoking** · 15/02/2012, 18h41

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[edit]

**ticroch** · 16/02/2012, 08h21

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 ....

Changer la valeur d'un bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager