Problème de navigateur croisé relatif à onchange/onfocus

Question

J'essaie de transformer un <label/> et un <input type="radio"/> en un seul bouton qui, une fois cliqué, ajoute ce produit spécifique à un panier. Cet exemple concerne 1 produit, avec des variantes potentiellement multiples (par exemple, le produit serait "Denim Jeans", les variantes seraient des tailles, "26", "27", "28").

Le code HTML ressemblerait à quelque chose comme,

<label for="radio_denim26"> 
    <span>26</span> 
    <input type="radio" style="position:absolute;top:-30px;left:-30px;" value="denim26" id="denim26" checked="checked" onfocus="form.submit();" onchange="form.submit();" /> 
</label> 

<label for="radio_denim27"> 
    <span>27</span> 
    <input type="radio" style="position:absolute;top:-30px;left:-30px;" value="denim27" id="denim27" checked="checked" onfocus="form.submit();" onchange="form.submit();" /> 
</label> 

<label for="radio_denim28"> 
    <span>28</span> 
    <input type="radio" style="position: absolute;top:-30px;left:-30px;" value="denim28" id="denim28" checked="checked" onfocus="form.submit();" onchange="form.submit();" /> 
</label> 

** Le CSS sur le <input/> sont pour cacher les boutons radio de visibilité *

Cela fonctionne très bien dans IE 8, IE 7 et IE 6 (étonnamment!) Il fonctionne également dans Safari/Chrome. Il ne fonctionne pas dans Firefox. Quand je clique sur une variante spécifique, disons "27", il ajoute la dernière variante du groupe au panier, soit "28".

Une dernière chose à noter, si je supprime le onfocus="form.submit();" cela fonctionne très bien dans Firefox, mais plus dans IE 7-.

Answer 1

Vos balises de bouton radio devraient probablement avoir des attributs "nom". Le nom devrait être le même pour chacun, afin qu'ils fonctionnent comme des boutons radio.

Answer 2

Les étiquettes de l'attribut doivent pointer vers l'ID de l'entrée. Peu importe leur emplacement, ils peuvent être cachés ou sur les côtés opposés de l'écran. Tant que @for de l'étiquette pointe vers @id de l'entrée, il est bon d'y aller.

ie.

<label for="denim1"> 
    <span>28</span> 
</label> 
<input type="radio" ... id="denim1" /> 

Découvrez w3schools tag label exemples

btw. Beau site! :)