JQuery val() does not work for textarea in Opera

Question

I am displaying a modal dialog using jQuery. This dialog has a textarea control on it. But while submitting this dialog, the value of this textarea is not recognized by jQuery for some reason: it always comes blank. This works perfectly in other browsers. I put alert to display the value but it looks blank. Can anybody help me in this regards?

Controls:

<input type="text" id="txtGroupName"/>
<textarea rows="3" cols="30" id="txtDescription"></textarea>

jQuery code which used this value:

var postData = new Object();
postData.GroupName = $('#txtGroupName').val();
postData.Description = $('#txtDescription').val();

$('#txtDescription').val() comes blank but $('#txtGroupName').val() is read correctly as it is a input field.

One more finding about this issue:

When I put alert in my update function after populating the control value on page load, this alert displays the existing value properly. But it displays only existing value. It does not display the edited value after submitting the modal box.

Answer 1

val() and text() in jquery works correctly, but after setting value of textarea you need to rerender textarea, you can do this setting css property in such way

if ($.browser.opera)
    $('textarea').val(someText).css({display:block});
else
    $('textarea').val(someText);

Hello from Russia. Sorry for my english =)

Answer 2

I fix this using this in textarea

$("#descripcion").keydown(function(){
     $("#descripcion").css("display","block");
});

put at end of script. I am sorry for my english

Answer 3

Have you tried .attr("text") or .attr("value")? I'm unable to test this but this would seem logical to me.

If it doesn't then let me know and I'll remove this answer.

Answer 4

you may have come across a very obscure bug referred to in a blog post on the Opera sitepatching blog 1 as "PATCH-287, Hack to make script see typed value in TEXTAREA on blog.ebuddy.com. Opera fails to read correct value from a previously hidden textarea".

I'm a little bit reluctant to recomment workarounds without seeing the full code though.

Answer 5

Good day people,

I too have the same problem with Opera 10.63 and Windows.

The hack suggested by Javier Canizalez works, but only as long as I don't reuse the dialog (and the textarea) again. However, this is not the case. With his hack, after the page is loaded and I click on an item, I display a dialog that was previously hidden (display:none) with textarea inside it. Everything works fine the first time (with the hack). After closing the dialog /* $(dialog).hide()); */ and reusing it again by clicking on another item, the hack does not work anymore and javascript/jQuery does not get the new typed value anymore until a full page reload.

I found at one of the links given above that the guys at opera have fixed that problem: PATCH-287 But it does not seems fixed to me :) I wrote a question there and will see if they'll reply: opera patch-287

Has someone managed to get a workaround this?

Thank you and best regards.

Answer 6

Select <textarea> by attribute name instead of id.

<textarea id="txtDescription" name="txtDescription"></textarea>
<script>
  jQuery("textarea[name='txtDescription']").val();
</script>

Answer 7

Textarea doesn't have a value attribute. Try to use

$('#txtDescription').text();

Answer 8

I've found, in Chrome 6.0.472.59, Firefox 3.6.9 and Opera 10.62, all on Ubuntu 10.04, that textarea does have/use the .val() attribute. On the off-chance that some other browsers don't, or might not, I put together this jsbin demo. I used an if/else block to cover both approaches, though. Just in case...

$(document).ready(
  function() {
  $('form').submit(
    function() {

      if ($('textarea').val()) {
        var means = 'val()',
        textValue = $('textarea').val();
      }
      else {
        var means = 'text()',
        textValue = $('textarea').text();
      }

      alert('(' + means + ') ' + textValue);

      return false;
    }
    );
  }
  );

This Stackoverflow question (jQuery get textarea text) also suggests that it should be possible and reliable, as does the first commenter on the API page for Val(), at jQuery.com.

Note, as regards Opera: the jsBin demo only worked once I'd deactivated the developer tools (for whatever reason). It might be worth turning off Dragonfly (if it's running), and then refreshing the demo page (or, obviously, your own test page) to see if it makes a difference. Either way, it's always worth clearing your cache to make sure the most up-to-date version of the files are being used.

Answer 9

In opera for getting the value or a textarea works only:

document.getElementById("description").value;

strange is that $("textara#description").val("") works (set method)

Answer 10

I use this workaround:

if (window.opera)
{
  document.addEventListener('focus', function(event){
    if (event.target instanceof HTMLTextAreaElement)
    {
      event.target.contentEditable = true;
      event.target.contentEditable = false;
    }
  }, true);
}