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.

Stipple

Which browser/platform are you using? – Billingsgate

I am using Opera 10.53 and my OS is Windows 7. – Stipple

I can't necessarily help with the Windows part, but I'll install Opera on my Ubuntu box and see if I can come up with anything useful. – Billingsgate

after adding default text to the form on the jsbin demo (<textarea>default text</textarea>) and then editing the text to a new value/string and submitting it, it still seems to work fine on all the browsers I've tried so far (with Ubuntu). It might be a platform issue/bug with Opera and Windows 7. You've presumably cleared your cache, and such? – Billingsgate

Answer 1

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

Minutely

Answer 2

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 =)

Debauched

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.

Waylay

text gives 'undefined' and value gives blank – Stipple

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.

Rebec

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.

Highway

Answer 6

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

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

Unappealable

You are right it doesn't have a value attribute in HTML, but I'm pretty sure jQuery's val() will hand back the text node. – Dedra

Answer 7

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.

Billingsgate

thanks for the approach. But thing is that text() as well as val() are not working here. – Stipple

@Anil: you're sure that it's the $('textarea').val(); bit that's not working? I realise that it's not the most canonical place to which I should refer, but one commenter on the api.jquery.com/val for the .val() function/method suggests that is should work (demonstrably so, in the cases of Chrome and FF on Ubuntu). – Billingsgate

I used $("#txtDescription").val() because that is the id of my control. but not working. Do you want me to use $('textarea') instead? I assumed that 'textarea' should be replaced by my control's id. – Stipple

@Anil: it's worth a try if all else fails. Though I can't see a reason why it wouldn't work regardless, given the correct (spelling of the) textarea's id. – Billingsgate

Answer 8

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

document.getElementById("description").value;

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

Woermer

Same in Firefox, I needed to use $("textarea#myelement").val(""); Don't know why. – Cytology

Answer 9

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);
}

Zealand

Answer 10

Select <textarea> by attribute name instead of id.

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

Kell