Changing button text using JavaScript does not work in Opera (11.11) for <input type = "submit" / "> elements. Why?
Why is this button text change not working in Opera 11.11 for items like
<input type="submit" value="Asdasd" id="blahblah_button" /> ? (Did not try in previous versions.)
I tried it with jQuery and with pure JavaScript, but none of them worked.
This is the jQuery code I tried:
$('#blahblah_button').val('Blah-blah'); and this is the "clean" JS code:
document.getElementById('blahblah_button').value = 'Blah-blah'; Why did n't this one of them work in Opera 11.11 ?
It works in IE, Chrome and FF , it surprises me that it does not work in Opera.
I should mention that it also works for button tags in Opera:
<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 requesting a button value after modification gives a result that seems to work fine, which means it changes the structure in the JS DOM but does not make the button re-visible accordingly.
This is sample code with which you can try the following:
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 value</button> </p> </body> </html> EDIT II. (4:41)
But I should also mention that it works for input elements with a "button" type - so I supplemented my code above with such an element. I also noted which types do and which don't work.
EDIT III.
In the meantime, I tested it and it does not work in Opera <= 11.11 , but this error was fixed in Opera 11.50 , though.
This is a bug in Opera. I'm not sure what calls it, but a simple test page that renames the button does not cause any problems, however with the @Darin jsfiddle.net example an error appears.
This seems to be a redraw error. I noticed that the width of the button changes according to the new label, but the actual label does not change. In addition, moving from the page and returning, a new label is displayed instead of the old one.
I made a quick google and could not find anyone else who met him.
Here is the workaround I found:
$('#blahblah_button').val('there'); $('#blahblah_button').get(0).outerHTML = $('#blahblah_button').get(0).outerHTML; Perhaps someone might find a more workaround, ideally one that is built into the jQuery val() method. But the best solution for Opera, obviously, is to fix the error. You must send them an email.
@Abhi Beckert, actually some guy found this error - http://webinterfacetricks.com/opera_submit_bug/ I 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, this is rather strange, but I hope the guys from Opera fix it soon. Can you report this by the way?