Bouton radio chargeant une page

**santaflam** · 28/12/2018, 02h53

Developpeurs, Bonjour!

j'aimerais charger une page HTML lorsque l'utilisateur active un bouton radio (choix qui correspond à un produit de couleur et specifs differentes).
Pas trouvé d'attribut "action" à mettre sur le "input type="radio"... Quant à mettre un lien à côté du bouton radio ça ferait doublon pour l'utilisateur.
Donc j'ai pensé à la solution ci-jointe, de mettre tout le bouton à l'intérieur de balises <a href=... Ça marche en effet, mais petite imperfection: ça ne marche que en cliquant sur le radio, ça ne marche pas en cliquant sur le label correspondant au radio.
Or je suppose que beaucoup d'utilisateurs cliquent à la va-vite sur le label pour activer le radio, trop pressé pour viser le radio.

Si qq'un a une idée pour faire ça, j'achète...

Merci pour toute info.

Code épuré pour test:

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
21
22
23
24
25
<!doctype html>
<html lang="en">
  <body>
     <fieldset>
       <legend>couleur :</legend>
       <div>
         <a href="le_lien.php">
           <label>
           <input type="radio" class="" name="couleur" id="optionsRadios1" value="bleu">
           bleu
           </label>
         </a>
       </div>
       <div>
         <a href="le_lien.php">
           <label>
           <input type="radio" class="" name="couleur" id="optionsRadios1" value="rouge" checked>
           rouge
           </label>
         </a>
       </div>
     </fieldset>
 
  </body>
</html>

**santaflam** · 28/12/2018, 03h06

Bon, je viens de trouver une solution en changeant la syntaxe html: remplacement du <fieldset> par un <form>, et toujours encadré par le <a href:...> . Voir code.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
     <form>
       <div>
         <a href="le_lien.php">
           <input type="radio" class="" name="couleur" id="optionsRadios1" value="bleu">
           bleu
         </a>
       </div>
       <div>
         <a href="le_lien.php">
           <input type="radio" class="" name="couleur" id="optionsRadios1" value="rouge" checked>
           rouge
         </a>
       </div>
      </form>

**Celira** · 03/01/2019, 17h11

Sinon, avec un peu de JS :

Code html :

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

1
2
<input type="radio" class="" name="couleur" id="optionsRadios1" value="blue" onchange="window.location.href='le_lien1.php'"> <label for="optionsRadios1">Bleu</label>
<input type="radio" class="" name="couleur" id="optionsRadios2" value="red" onchange="window.location.href='le_lien2.php'"> <label for="optionsRadios2">Rouge</label>

Ou si les radios sont à l'intérieur d'un formulaire, tu peux soumettre le formulaire (éventuellement en changeant l'action en fonction de la valeur du bouton)

Bouton radio chargeant une page

HTML

Discussions similaires

Partager

Partager