Changing button text with JavaScript doesn't work in Opera (11.11) for <input type="submit" /> elements. Why?

Asked 21/5, 2011 at 22:11 Answered 25/8, 2011 at 11:46

Why is that changing a button text doesn't work in Opera 11.11 for elements like

<input type="submit" value="Asdasd" id="blahblah_button" />

? (Didn't try it in earlier versions yet.)

I tried it with jQuery and with "pure" JavaScript too, none of them worked.
This is the jQuery code I tried:

$('#blahblah_button').val('Blah-blah');

and this is the "pure" JS-code:

document.getElementById('blahblah_button').value = 'Blah-blah';

Why is that none of them worked in Opera 11.11?
It DOES work in IE, Chrome and FF, it surprises me that it doesn't work in Opera.

I have to mention that it DOES work for button tags like this in Opera too:

<button id="test_button" onclick="$(this).text('Blahblah');">Some text</button>

Thanks for your answers in advance!

EDIT I. (0:40)

I forgot to mention that querying the button's value after the modification gives the result that it seems to work fine, which means it changes the structure in JS DOM, but doesn't rerender the visible button appropriately.

This is the example code with which you can try this behaviour:

http://jsbin.com/inuxix/1/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Changing button text</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <p>Button tag - WORKING
            <button onclick="$(this).text('Blahblah_1');" id="test_button">Button_text (button_tag)</button>
        </p>
        <p>Input tag (type: submit) - NOT working
            <input onclick="$(this).val('Blahblah_2');" type="submit" value="Submit_text" id="blahblah_submit_type" />
        </p>
        <p>Input tag (type: button) - WORKING
            <input onclick="$(this).val('Blahblah_3');" type="button" value="Button_text" id="blahblah_button_type" />
        </p>
        <p>
            <button onclick="alert($('#blahblah_submit_type').val());" id="val_button">Getting blahblah_submit_type's value</button>
        </p>
    </body>
</html>

EDIT II. (4:41)

But I also have to mention that it DOES work for input elements with "button" type - so I complemented my code above with an element like this. I also marked which types do and which don't work.

EDIT III.

In the meantime, I tested it, and it doesn't work in Opera <= 11.11, but this bug has been fixed in Opera 11.50 though.

Michelson answered 21/5, 2011 at 22:11 Comment(11)

I have no Opera 11.11 to test but when you navigate here what do you see: jsfiddle.net/UW4Q2 ? And I would be extremely highly surprised if you didn't see Blah-blah as value for the submit button. It would definitely mean that there is a bug in jQuery and/or Opera 11.11 which once again I would be extremely highly surprised. – Trinetta 21/5, 2011 at 22:15

I just tested what you posted, and it works perfectly in Opera for me. There bug must be somewhere else in your code, can you post an example of some code that doesn't work in opera? – Rabbitfish 21/5, 2011 at 22:17

@Darin Dimitrov: That works for me. There shouldn't be a reason why this would suddenly break in Opera 11.11. – Booze 21/5, 2011 at 22:17

@BoltClock, of course that this should work :-) – Trinetta 21/5, 2011 at 22:19

But it doesn't work for me in Opera 11.11 – Helle 21/5, 2011 at 22:20

@Darin that code does not always work in opera. Changing it to not use jQuery also doesn't always work. If i run the script, the button name doesn't change. Interestingly, if i go to another page and press "back" to return to the jsfiddle page, the button name has changed to "blah-blah". – Rabbitfish 21/5, 2011 at 22:20

@nash, @Abhi Beckert, sorry to ask but what kind of a crap of a browser is this Opera 11.11 if this code doesn't work? I mean this works in IE 6 for Christ sake. – Trinetta 21/5, 2011 at 22:21

@Darin: it doesnt work for me either – Citric 21/5, 2011 at 22:29

@Darin: just tried in Opera 11.11/Ubuntu 11.04 - really surprises me that this really doesn't work. Works fine for 'text', 'radio' and 'checkbox' input types, doesn't work for the 'submit' type. Very odd. – Multiparous 21/5, 2011 at 22:34

@Jon Cram, @Peri, what happens if you pick a previous version of jquery in my jsfiddle snippet? – Trinetta 21/5, 2011 at 22:36

I just modified my original post with an example code, with which you can try this buggy behaviour! @Darin Dimitrov, I tried it with "pure" JavaScript too, it doesn't work either, so this means it's not related to jQuery, but related to Opera. :( But it doesn't mean Opera is crappy, it's just a stupid bug, which really has to be fixed. Thanks for everyone's comment, it was really helpful! – Michelson 21/5, 2011 at 22:48

This is a bug in Opera. I'm not sure what causes it, but a simple test page that renames the button does not trigger any issues, however on @Darin's jsfiddle.net example the bug does appear.

It appears to be a redraw bug. I noticed the width of the button changes to match the new label, but the actual label does not change. Also, shifting away from the page and going back, shows the new label instead of the old one.

I did a quick google and could not find anyone else who's come across it.

Here is a workaround that I found:

$('#blahblah_button').val('there');
$('#blahblah_button').get(0).outerHTML = $('#blahblah_button').get(0).outerHTML;

Perhaps someone can find a cleaner workaround, ideally one that's built into jQuery's val() method. But the best solution is obviously for Opera to fix the bug. You should send them an email about it.

Rabbitfish answered 21/5, 2011 at 22:30 Comment(1)

Thank you very much, Abhi Beckert! This really seems to be an Opera-specific bug then. I will surely send a mail to the developer team of Opera. Your workaround works perfectly! :) Thanks again! – Michelson 21/5, 2011 at 22:46

@Abhi Beckert, actually some guy found this bug - http://webinterfacetricks.com/opera_submit_bug/ I've tested it and it works:

<html>
<input type="submit" value="A" id="blahblah" onClick="click_input(this)" />
<script>
    function click_input(input)
    {
        input.value = "test";
        input.type = "submit";
    }
</script>
</html>

Yes, it's pretty odd but I hope Opera guys will fix it soon. Can you report them, btw?

Helle answered 21/5, 2011 at 22:43 Comment(7)

Wow, nash, this really works, thank you for that!! But I'm really sorry, I can accept just one answer. :(( Abhi Beckert was a little bit faster. But your comment was really-really helpful too!! Thank you very much! :) I voted up yours too. And yepp, I try to report it to Opera ASAP. :) I'm just looking for the appropriate forum and/or e-mail address to report that bug. – Michelson 21/5, 2011 at 22:53

@Abhi Beckert: I cite myself (from the first comment I wrote to nash's post): "I voted up yours too." – Michelson 21/5, 2011 at 23:28

I've already sent a report to Opera here: bugs.opera.com/wizard Hope they'll fix it soon. :) – Michelson 22/5, 2011 at 3:0

Thanks for reporting a bug - could you give me the issue reference, and I'll give it a kick? If you gave your E-mail address, you should have received a confirmation by E-mail, this includes the bug number - typically DSK- and some digits. Thanks :) – Hair 23/5, 2011 at 7:24

Actually, it's been spotted already and there is a fix in the pipeline :-D – Hair 23/5, 2011 at 13:45

@hallvors: of course, this is the bug number I got a confirmation of: DSK-337323 How can you give it a kick? Do you work at Opera? :) Thanks anyway! Yepp, and one more question: do you have any info when can we 'enjoy' the fix of the bug? :)) – Michelson 24/5, 2011 at 9:9

Yes, I work for Opera and one of my tasks is basically to try to get bugs that cause problems "out in the wild" prioritised internally. I'm pretty sure this fix will go into Opera 11.50, actually I expect it to be in one of the next updates announced on my.opera.com/desktopteam/blog . Keep an eye on the changelog when that blog announces a new build with a core update :-) – Hair 31/5, 2011 at 3:58

I found another way with js:

document.getElementById('blahblah_button').innerText = "testText";

Pastoralize answered 25/8, 2011 at 11:46 Comment(0)

EDIT I. (0:40)

EDIT II. (4:41)

EDIT III.

Recommended topics

Hot tags