Dynamic text in textarea – getting value

Question

Question by Gabriel Żukowski

My text/value in textarea it’s not static – I’m chaning it. I can’t get the current value.
E.g
1

<textarea>
Lorem ipsum
</textarea>
//it's defalut in html file

2

Putting into textarea:

Dolores is lorem ipsum

Alert is only showing 1 version(“lorem ipsum”), but not second (“Dolores is lorem ipsum”). I’m trying to do it in jquery:

var variable = $("#selector").val();
alert(variable);

What I’m doing wrong?

EDIT

I want to catch it to variable 🙂 Not to alert. Alert is only my test 🙂

Answer 1

Answer by TimWickstrom.com

TimWickstrom.com

var text = $('#textareaID').val();

$('#textareaID').change(function() {
  text = $(this).val();
});

when ever you want text just reference it 🙂

EDIT:

If your using tabs UI please review the docs and the event management:

Place This outside of bound scope:
var text = $('#textareaID').val(); OR var text = '';

$('#example').bind('tabsselect', function(event, ui) {
      // Objects available in the function context:
      // ui.tab anchor element of the selected (clicked) tab
      // ui.panel element, that contains the selected/clicked tab contents
      // ui.index zero-based index of the selected (clicked) tab
      // INSIDE HERE IS WHERE YOU CAN PUT THE CODE IN THE ABOVE EXAMPLE
      $('#textareaID').change(function() {
            text = $(this).val();
      });
});

NOTE: $(‘#example’) would be the parent div that holds the tabs and content

Further optimization recommendation.

If you think $(‘#textareaID’) will be called often you may want to cache a reference to it so the selector engine does not have to find it on every instance, this would be done like:

var textarea = $('#textareaID');
 var text = $('#textareaID').val();

For this line:

var textarea = $('#textareaID');

Make sure it is inside of a $(document).ready(function() {}); Call and the element is exists

you could check for this by doing:

var textarea = $('#textareaID') || false;

And wrap the code above like this:

$('#example').bind('tabsselect', function(event, ui) {
          // Objects available in the function context:
          // ui.tab anchor element of the selected (clicked) tab
          // ui.panel element, that contains the selected/clicked tab contents
          // ui.index zero-based index of the selected (clicked) tab
          // INSIDE HERE IS WHERE YOU CAN PUT THE CODE IN THE ABOVE EXAMPLE

          if(textarea) {
               textarea.change(function() {
                    text = $(this).val();
               });
          }
    });

Hope this helps!

Answer 2

Answer by Starx

Starx

The error is somewhere else.

The code you are using is correct. Check a demo