Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="description" content="Changing button text with JavaScript doesn't work in Opera (&lt;= 11.11) for input type='submit' elements." />
  <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>
  
  <h1>Changing button text with JavaScript doesn't work in <u>Opera</u> (&lt;= <a href="http://opera-usb.com/download/operausb1111int.zip">11.11</a>) for <code>&lt;input type=“submit” /&gt;</code> elements. Why?</h1>
  
  <p><a href="http://stackoverflow.com/questions/6084766/changing-button-text-with-javascript-doesnt-work-in-opera-11-11-for-input-ty">http://stackoverflow.com/questions/6084766/changing-button-text-with-javascript-doesnt-work-in-opera-11-11-for-input-ty</a></p>
  
  <div id="main_wrapper">
​
    <p>Button tag - WORKING (#test_button):
            <button onclick="$(this).text('Blahblah_1');" id="test_button">Button_text (button_tag)</button>
        </p>
    <p class="error">Input tag (type: submit) - <strong>NOT working</strong> (#blahblah_submit_type):
            <input onclick="$(this).val('Blahblah_2');" type="submit" value="Submit_text" id="blahblah_submit_type" />
        </p>
        <p>Input tag (type: button) - WORKING (#blahblah_button_type)
            <input onclick="$(this).val('Blahblah_3');" type="button" value="Button_text" id="blahblah_button_type" />
        </p>
        <p>
          <button onclick="$('#val_blahblah_submit_type').text($('#blahblah_submit_type').val()).fadeOut(500).fadeIn(500);" id="val_button">Getting blahblah_submit_type's value</button> - value: <span id="val_blahblah_submit_type"></span>
        </p>
    
  </div>
  
  <p>Tested, and it's been fixed in <a href="http://opera-usb.com/download/operausb1150int.zip">Opera 11.50</a> though.</p>
  
</body>
</html>
 
#main_wrapper {
  border:5px outset green;
}
​
.error {
  border:1px solid red;
}
​
#val_blahblah_submit_type {
  color:red;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Sk8erPeterpro
0viewers