bug 349 - you cant select a radio button in IE if it doesn't have a name

Issue: #349
Affects: IE6, IE7, IE8
Fixed In: IE9 Platform Preview 1

This isn't a major bug since it has such a simple workaround but an odd one for sure.

In short it is really simple. If you add a radio button to your page that doesn't have a name attribute, you can't select it... even if it has an id attribute or even if you pair it up with a <label> tag it still won't select.

Example:

<input type="radio" id="foo"/> <label for="foo">Pick Me!</label>
<input type="radio" id="bar"/> <label for="bar">No Pick Me!</label>

Try it out!
Pick Me!
No Pick Me!

If you are using a non-IE browser it should work just fine.

Known Workarounds: One. Add a name attribute and it works just fine in IE.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

bug 444 - IE8 printing issues in standards mode

Issue: #444
Affects: IE8

MSIE Feedback ID: 431489

IE8 has a new bug with printing. When you change a checkbox or radio button on a page either by clicking it or calling some JavaScript function to toggle it - it looks like it changed but if you try to print it, it won't print in the new state.

In fact it won't even show up correctly in the print preview window!

According to sources at Microsoft there is no intention of fixing this until IE9!

The best part is that this ONLY occurs in Standards Mode. If you render your pages in the Legacy IE7 Mode the checkboxes and radio buttons print (and preview) properly.

Known Workarounds: None.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

bug 173 - form field focus issues in Safari

Issue: #173
Affects: Safari 3.1 (Win), {Safari 3.1 (Mac)?}

As more and more applications go online in this Web 2.0 world, interactions with forms are critical to an applications success. Safari leads the way with built-in textarea resizing but it has a major issue with form field focus.

Since data entry in forms is a crucial part of online forms, ensuring that your forms are both keyboard and mouse navigable is important. Unfortunately in Safari the keyboard navigation breaks if you use the mouse on radio or checkbox elements. This becomes a major issue because although radio and checkbox elements are keyboard accessible, in general users prefer to use the mouse to make their selection(s).

The issue is this. If you use the mouse to select a radio or checkbox field one expects that that field has the focus and thus a 'Tab' will take you to the next available field (or whatever is defined in the tabindex order). When the user presses 'Tab' in Safari, the focus resets to the first form field on the page!

If you use the mouse for other types of fields, or use only the keyboard the issue doesn't occur.

Example: (Try it out!)

First Name:
Last Name:
Email:
Life Story:
Gender:
Female
Male
Pets Name:
Spam Preferences:
Pornography (NSFW collection)
Medications (weight loss, ED, muscles)
Mortgage/Loan (impossible rates)
Religion (guilt, pressure, overtones)
Fakes (fake rolex, cartier, artwork)
Hot Stocks (buy! buy! insider info)
Pirated software (OEM, Bulk, Download)
Illegal Music/Movies (Torrents, P2P)
Surprise Me! (Scams, popup, virus)
Address Line 1:
Address Line 2:
Comments:

Known Workarounds: None.

Related Issues: (bug 132).

Bug/Site Feedback |
Submit a bug

bug 299 - setAttribute "checked" does not work in IE

Issue: #299
Affects: IE5, IE5.5, IE6, IE7
Fixed In: IE8 RC1

If you use the DOM Methods to build up new content for your page, be aware that in IE, you can't pre-check a radio button or a checkbox using .setAttribute('checked', 'checked'); or even myCheckBoxObject.checked = true; *unless* you add the element to the page first.

Example:

<script type="text/javascript">
  var cb1 = document.createElement('input');
  cb1.setAttribute('checked', 'checked');
  document.getElementsByTagName('body')[0].appendChild( cb1 );
</script>

In all other browsers, this would add the checkbox to the page, pre-checked.

Known Workarounds: Two. You can set the checked attribute after you've appended your element to the DOM (so it will flash momentarily before being checked), or, you can call cbObj.setAttribute('defaultChecked', 'defaultChecked'); which will also work.

Note, when setting the checked, or the defaultChecked attribute, any value for "true" will work.

Example Workaround Code:

<script type="text/javascript">
  var cb1 = document.createElement('input');
  cb1.setAttribute('defaultChecked', 'defaultChecked');
  document.getElementsByTagName('body')[0].appendChild( cb1 );
</script>

Related Issues: bug 235, bug 237, bug 242.

bug 193 - onchange does not fire properly on IE radio buttons and checkboxes

Issue: #193
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4
Fixed in: IE9 RC 1 (in IE9 standards mode only)

The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field.

Example:

<input type="radio" name="foo" value="Green" onchange="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onchange="alert(this.value);"/>Blue

As soon as you click on either of these radio buttons, the alert should pop up telling you what you just selected.

Try it out!

Green

Blue

You'll notice that it works just fine in all browsers except Internet Explorer. In fact, in IE, clicking once will not pop up the alert, but clicking the other radio button will pop up the alert, but the value is the last radio button clicked.

Known Workarounds: One. Instead of using the onchange event, use the onclick event for radio and checkbox elements instead (or at least for IE)

Example Workaround Code:

<input type="radio" name="foo" value="Green" onclick="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onclick="alert(this.value);"/>Blue

Test this version with onclick:
Green

Blue

Related Issues: None.