views:

23

answers:

2
<!DOCTYPE HTML PUBLIC "-//WC3/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html>
<body>
<label>A label
<input type="button" value="First" onClick="alert('First');" />
<input type="button" value="Second" onClick="alert('Second');" />
</label>
</body>
</html>

Tried this code in Firefox 3.6.8. When I click "first" it displays "first". When I click "second", it displays "second, and then "first"? Is this a weird onClick behavior due to block level tags (input) in inline tag (label)?

+1  A: 

Yup, it happens in alot of browsers (well all the ones i have installed anyway), and it happens with span tags (which are also inline).

If this is a form, it should read:

<label for="First">First</label>
<input type="button" value="First" id="First" onclick="alert('First');" />
<label for="Second">Second</label>
<input type="button" value="Second" id="Second" onclick="alert('First');" />

If not, try span tags instead?

jamie-wilson
A: 

Your buttons are nested into the single label element. When you click on the second button, Firefox activates the label and then the first button. You should divide your label, as suggested by @jamie-wilson.

floatless