Проблема с перекрестным браузером Относительно onchange/onfocus

Question

Я пытаюсь превратить <label/> и <input type="radio"/> в одну кнопку, которая при нажатии добавляет этот продукт в корзину покупок. В этом примере рассматривается 1 продукт с потенциально множественными вариантами (т. Е. Продукт будет «джинсовые джинсы», варианты будут размером «26», «27», «28»).

HTML, будет выглядеть примерно так,

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

** CSS-на <input/> должны скрывать кнопки радио от видимости *

Это прекрасно работает в IE 8, IE 7 и IE 6 (удивительно!) Он также работает в Safari/Chrome. Это не Работа в Firefox. Когда я нажимаю на конкретный вариант, скажем, «27», он добавит последний вариант в группу в корзину, то есть «28».

Последнее замечание, если я удалю onfocus="form.submit();", он отлично работает в Firefox, но уже не в IE 7-.

Answer 1

Ваши теги с переключателями должны иметь атрибуты «имя». Имя должно быть одинаковым для каждого, так что они фактически работают как переключатели.

Answer 2

Этикетки атрибута должны указывать на идентификатор ввода. Не имеет значения, где это место, они могут быть скрыты или на противоположных сторонах экрана. Пока @ для ярлыка указывает на @id ввода, ваше добро пожаловать.

ie.

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

Заканчивать w3schools tag label примеры

кстати. Хороший сайт! :)