Ticket #1954 (closed bug: fixed)
val() returns innerHTML for button elements in IE
| Reported by: | dmuir | Owned by: | timmywil |
|---|---|---|---|
| Priority: | high | Milestone: | 1.6 |
| Component: | manipulation | Version: | 1.4.4 |
| Keywords: | IE button val() | Cc: | |
| Blocking: | Blocked by: |
Description
val() returns the value of the value property in FF, but returns the value of innerHTML in IE.
jQuery 1.1.4 did not have this bug.
html: <button value="myValue">Click Me</button>
js: alert($('button').val());
IE: alerts "Click Me"
FF: alerts "myValue"
Attachments
Change History
comment:2 Changed 6 years ago by dmuir
must have been seeing things... tested again with 1.1.4 and it doesn't work there either. The only solution I have is to retrieve the html for the button element and do a regex to extract the value attribute. IE's button dom element does not have a property storing the value (it is overwritten by the button's innerHTML).
comment:3 Changed 6 years ago by davidserduke
Weird. I see the same thing you do. Using the debugger the "value" as assigned by the attribute just isn't stored anywhere and appears to be overwritten by the innerHTML. It's interesting if you overwrite the value it will then be correct like:
$("button").val("newValue");
alert($("button").val());
alerts "newValue" in both IE and FF. I hate to say it but there does not appear to be an easy cross-browser fix. :(
comment:4 Changed 5 years ago by john
- Status changed from new to closed
- Resolution set to wontfix
Doesn't look like this can be resolved, unfortunately.
comment:5 Changed 5 years ago by luka.kladari
- Status changed from closed to reopened
- Resolution wontfix deleted
i've dug up a fairly dirty/ugly workaround (credit: http://odyniec.net/projects/iefixbuttons/):
var rawval = $("button").get(0).outerHTML.match(/value\s*=\s*['"](['"]*)['"]/);
var val = (rawval ? rawval[1] : );
to be combined with if($.browser.msie)
this will fail in cases like value="bla'bla'bla", which are perfectly valid in HTML
can someone with better JS regex skills than me figure out how to catch the opening character and match everything until it shows up again? I believe that would be a fairly robust (albeit ugly) fix, which could be implemented in jquery core?
comment:6 Changed 5 years ago by flesler
- need changed from Review to Patch
- Owner set to flesler
- Status changed from reopened to new
- Milestone changed from 1.2.2 to 1.3
aButton.attributes.value.nodeValue returns the value on IE.
I think this can be indeed worked around.
comment:9 Changed 5 years ago by jollytoad
Can also use:
buttonElement.getAttributeNode('value').value
comment:12 Changed 4 years ago by dmethvin
Bug #3259 has a test case and link to further discussion.
comment:13 follow-up: ↓ 14 Changed 3 years ago by dmethvin
- Status changed from assigned to closed
- Resolution set to worksforme
This seems to be working now, tested in 1.4.2 and IE8.
comment:14 in reply to: ↑ 13 Changed 3 years ago by Anthony Johnston
Replying to dmethvin:
This seems to be working now, tested in 1.4.2 and IE8.
doesn't work in ie7 or wp7 (which is also ie7) comment 6 has the answer
comment:15 Changed 2 years ago by anonymous
As stated above this issue is not fixed yet for IE7 in jQuery 1.4.4. The workaround mentioned in comment:6 works for IE7 on WinXP and should be implemented for the val and attr functions.
Unfortunately, this issue tracker in use here doesn't permit to reopen the bug for whatever reason.
comment:16 Changed 2 years ago by jitter
- Status changed from closed to reopened
- Cc dmuir removed
- Component changed from core to manipulation
- Priority changed from major to high
- Version changed from 1.2.1 to 1.4.4
- Milestone changed from 1.3 to 1.6
- Resolution worksforme deleted
comment:18 Changed 2 years ago by jitter
#7938 is a duplicate of this ticket.
comment:19 Changed 2 years ago by robert.clark
I have an updated patch against git that handles reading & setting button values via .val() & .attr('value') as well as .removeAttr('value'). I don't seem to be able to attach it to this ticket, though. Shouldn't there be an "Attach file" button somewhere?
comment:20 Changed 2 years ago by dmuir
can't see where to add an attachment either... but I'm curious to see what your solution is.
comment:21 Changed 2 years ago by robert.clark
It's nothing especially clever, just some special-cases that use getAttributeNode, setAttributeNode & removeAttributeNode. The special-cases target only the value attribute on buttons in IE7 (and lower) to minimise the impact.
I've stuck it up here: https://gist.github.com/776092
comment:22 follow-up: ↓ 23 Changed 2 years ago by julien.garand+jquery@…
Hi,
Please consider the following test case with IE7 : http://jsbin.com/ipitu4 Each button is written as
<button value="some value">some code</button>
.
We would expect IE7 to return the correct "value" attribute value when calling
$('button').attr('value'); // BUG
... It doesn't !
The solution is given by the third button
$('button').get(0).getAttributeNode('value').value; //CORRECT
Regards, Julien
comment:23 in reply to: ↑ 22 Changed 2 years ago by anonymous
Replying to julien.garand+jquery@…:
Same test case with jsFiddle : http://jsfiddle.net/sKuHr/1/
comment:24 Changed 2 years ago by robert.clark
Here's a new patch which tests for the bug instead of using browser detection:
comment:25 Changed 2 years ago by robert.clark
And another, stripped-down, patch which only fixes the most common usage case (reading the value attribute):
comment:26 Changed 2 years ago by john
- Owner changed from flesler to timmywil
- Status changed from open to assigned
comment:25 Changed 2 years ago by timmywil
- Status changed from assigned to closed
- Resolution set to fixed
Fix value attribute and val for value on button elements. Fixes #1954
Changeset: 34d80709ce9bd583f6f5dd17e9bffa2fb7cff3c5
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


using .attr('value') does not work around this issue either