.val() returns text on button elements with <= IE7

Reported by:	septemberbrain	Owned by:
Priority:	undecided	Milestone:	1.4.2
Component:	attributes	Version:	1.4.2
Keywords:	value of button with different browsers	Cc:
Blocked by:		Blocking:

Description

$(document).ready(function(){

$('button').each(function(){

alert ($(this).attr('value'));

alert ($(this).val());

})

});

</script>

<button id="AUT" value="AUT">Automotive</button>

<button id="CON" value="CON">Consumer</button>

<button id="ENT" value="ENT">Enabling Technologies</button>

<button id="IND" value="IND">Industrial</button>

<button id="NET" value="NET">Networking</button>

This script gives different values depending on whether you are using IE or another browser. Not sure if this is a bug or not but I thought someone should know.

David

Attachments (1)

test-6835.html (0.7 KB) - added by dmethvin July 28, 2010 02:07AM UTC.

Test case

Change History (4)

Changed July 28, 2010 02:16AM UTC by dmethvin comment:1

description:	\ <script type="text/javascript"> \ $(document).ready(function(){ \ \ $('button').each(function(){ \ alert ($(this).attr('value')); \ alert ($(this).val()); \ }) \ \ }); \ \ </script> \ \ <button id="AUT" value="AUT">Automotive</button> \ <button id="CON" value="CON">Consumer</button> \ <button id="ENT" value="ENT">Enabling Technologies</button> \ <button id="IND" value="IND">Industrial</button> \ <button id="NET" value="NET">Networking</button> \ \ \ This script gives different values depending on whether you are using IE or another browser. Not sure if this is a bug or not but I thought someone should know. \ \ David \ → <script type="text/javascript"> \ $(document).ready(function(){ \ \ $('button').each(function(){ \ alert ($(this).attr('value')); \ alert ($(this).val()); \ }) \ \ }); \ \ </script> \ \ <button id="AUT" value="AUT">Automotive</button> \ <button id="CON" value="CON">Consumer</button> \ <button id="ENT" value="ENT">Enabling Technologies</button> \ <button id="IND" value="IND">Industrial</button> \ <button id="NET" value="NET">Networking</button> \ \ \ This script gives different values depending on whether you are using IE or another browser. Not sure if this is a bug or not but I thought someone should know. \ \ David \

description:

\ <script type="text/javascript"> \ $(document).ready(function(){ \ \ $('button').each(function(){ \ alert ($(this).attr('value')); \ alert ($(this).val()); \ }) \ \ }); \ \ </script> \ \ <button id="AUT" value="AUT">Automotive</button> \ <button id="CON" value="CON">Consumer</button> \ <button id="ENT" value="ENT">Enabling Technologies</button> \ <button id="IND" value="IND">Industrial</button> \ <button id="NET" value="NET">Networking</button> \ \ \ This script gives different values depending on whether you are using IE or another browser. Not sure if this is a bug or not but I thought someone should know. \ \ David \ → <script type="text/javascript"> \ $(document).ready(function(){ \ \ $('button').each(function(){ \ alert ($(this).attr('value')); \ alert ($(this).val()); \ }) \ \ }); \ \ </script> \ \ <button id="AUT" value="AUT">Automotive</button> \ <button id="CON" value="CON">Consumer</button> \ <button id="ENT" value="ENT">Enabling Technologies</button> \ <button id="IND" value="IND">Industrial</button> \ <button id="NET" value="NET">Networking</button> \ \ \ This script gives different values depending on whether you are using IE or another browser. Not sure if this is a bug or not but I thought someone should know. \ \ David \

I've attached a test case that works properly with IE8 and shows the difference between .value, .val(), and .attr("value"); I don't have IE6/7 handy right now but if someone can run the test case and attach output it might help.

Changed July 29, 2010 11:17PM UTC by dmethvin comment:2

OK, I got to an IE6 system and the test case indeed returns the innerText for *all* cases there. I also changed it to check

this.getAttribute("value")

and that is wrong as well. So I don't even see a way for jQuery to get the actual value property/attribute. See the community discussion here (near the bottom of the page):

http://msdn.microsoft.com/en-us/library/ms535211%28VS.85%29.aspx

I'll leave the ticket open for now, but this looks like it will be a wontfix unless someone has a good solution.

Changed October 15, 2010 02:35AM UTC by addyosmani comment:3

priority:	→ undecided
resolution:	→ wontfix
status:	new → closed

As a more suitable solution (aside from improved documentation on the original issue) has not been proposed in the months since the original ticket was submitted, I agree with the original call by dmethvin to set this ticket to wontfix for now.

Please feel free to re-open if a working solution is found.

Changed October 15, 2010 07:38AM UTC by jitter comment:4

_comment0:	Acutally you can get at the really value of the `value` attribute like this \ \ {{{ \ this.getAttributeNode("value").value \ }}} \ \ [http://www.jsfiddle.net/fUCmK/1/ live test case] → 1287128371266004
_comment1:	It seems I found a way to get at the really value of the `value` attribute (at least in IE6 can't test other IE versions at the moment). \ \ By using the DOM Level 1 `getAttributeNode` function. \ \ {{{ \ this.getAttributeNode("value").value \ }}} \ \ [http://www.jsfiddle.net/fUCmK/1/ live test case] → 1287128412206531

It seems I found a way to get at the really value of the value attribute (at least in IE6 can't test other IE versions at the moment).

By using the DOM Level 1 getAttributeNode function.

this.getAttributeNode("value").value

live test case

Hope this still gets noted as I can't reopen the ticket

Side navigation