jQuery - Add text to var and use it later (Uncaught ReferenceError)

Question

I have a textarea with id="message"

      <form method="post" name="addreply" id="addreply"> 
        <input type="hidden" name="pmid" id="pmid" value="">
        <textarea rows="10" cols="5" name="message" id="message" placeholder="Write your message..."></textarea>
        <input type="submit" class="butt green" value="Send">
      </form>

I want to 'save' whatever the user types in that textfield in a variable, and use it after the form is submitted.

Currently, what I have is this:

$('#message').keyup(function(e){

    if($(this).val() != '')
    {
      var textareatext= $(this).val();
     //console.log(textareatext);
    }
 });

I can see in the console.log that the text is being saved in the textareatext var. So far so good.

The user then submits the form, after he has entered the text:

   $(function() {
        $('form').submit(function(){
            $('#heading').hide();  
            $('#status').removeClass().addClass('alert info').html('Loading...').fadeIn();  
            $.post(
                '/index.php?i=pm&p=rr', 
                $('form').serialize(),
                function (data) {
                    proccessData(data);
                }
            );
            return false;    
        });
    });

    function proccessData (data) {
        $('#status').hide().html('');

        if(data=='success'){
            $("#post").append('<li class="current-user"><img width="30" height="30" src=""><div class="bubble"><a class="user-name"><?php echo $userdata['username']; ?></a><p class="message">'+textareatext+'</p><p class="time"></p></div></li>');


            $('#status').removeClass().addClass('alert success').html('Success!').slideDown();

        }
        else {
            $('#status').removeClass().addClass('alert error').html(data).fadeIn();
        }
    }

I get this error in the console.log: Uncaught ReferenceError: textareatext is not defined

Answer 1

Looks like a scope issue to me. You defined the variable textareatext inside a function and then tried to use it in another function. Try:

var textareatext;
$('#message').keyup(function(e){

if($(this).val() != '')
{
  textareatext= $(this).val();
 //console.log(textareatext);
}
});

EDIT: Good job, everyone.

Answer 2

As @dystroy said, you can make the variable global, but rather than have globals laying around, just grab that text from the field when you need it, after all, you have an ID:

<p class="message">'+ $("#message").val() +'</p>

Answer 3

That is because textareatext is a local variable declared inside the keyup event.

Hence, inside the proccessData() javascript function you are not able to access it and hence you are getting the error in console.

Declaring it as a global varible will resolve your issue like:

var __textareatext = '';

$('#message').keyup(function(e){

    if($.trim(this.value) != '')
    {
       __textareatext= $.trim(this.value);
    }
});

also change the variable textareatext in proccessData() javascript function to __textareatext.

Answer 4

That's because your variable is defined in another scope. You should make it global (or at least you should define it in a scope accessible from all places where you need it) :

var textareatext;
$('#message').keyup(function(e){

    if($(this).val() != '')
    {
      textareatext= $(this).val();
     //console.log(textareatext);
    }
 });