Кросс-браузерная проблема, связанная с onchange / onfocus - PullRequest
Новая
       23

Кросс-браузерная проблема, связанная с onchange / onfocus

0 голосов
/ 12 октября 2009

Я пытаюсь превратить <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 -.

Ответы [ 2 ]

1 голос
/ 12 октября 2009

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

0 голосов
/ 12 октября 2009

Метки для атрибута должны указывать на идентификатор ввода. Неважно, там размещения, они могут быть скрыты или на противоположных сторонах экрана. До тех пор, пока @for метки указывает на @id ввода, все в порядке.

т. 

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

Проверить ярлык тега w3schools примеры

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

...