Cross-Browser Issue Regarding onchange/onfocus

Question

Hi,

I'm trying to turn a <label/> and <input type="radio"/> into a single button that when clicked, adds that specific product to a shopping cart. This example deals with 1 product, with potentially multiple variants, (ie. The Product would be "Denim Jeans", the Variants would be sizes, "26", "27", "28").

The HTML would look something like,

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

*The CSS on the <input/> are to hide the radio buttons from visibility

This works fine in IE 8, IE 7, and IE 6 (surprisingly!) It also works in Safari/Chrome. It does not work in Firefox. When I click a specific variant, let's say "27", it will add the last variant in the group to the cart, that being "28".

One final thing to note, if I remove the onfocus="form.submit();" it works fine in Firefox, but no longer in IE 7-.

Here's a live example of the site I'm referring to » http://tr.im/Bydy

Thank you to anyone that can help!

Answer 1

Your radio button tags should probably have "name" attributes on them. The name should be the same for each one, so that they actually work like radio buttons.

Answer 2

The labels for attribute needs to point to the id of the input. It does not matter there placement, they could be hidden or on opposite sides of the screen. So long as @for of the label points to @id of the input, your good to go.

ie.

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

Check out w3schools tag label examples

btw. Nice site! : )