CODEWITHSUNDEEP
javascriptjqueryhtml
Shelby115
Shelby115

Reputation: 2867

textarea.val() value changing but not displaying on page

I have a textarea like so,

<textarea id="txtaFilter" cols="45" rows="5"></textarea>

and the following script,

$(document).ready(function () {
    $(".selector").bind('change', function () {
        var value = $(this).val();
        $("#txtaFilter").val($("#txtaFilter").val() + value);
        $(this).children('option:eq(0)').prop('selected', true);
    });
});

where ".selector" is a class applied to two dropdownlists.

When I chose a value on the dropdown, it appears to do nothing, but after looking at the debugger in chrome it is changing the value just not displaying it.

Does anyone know why this is? Is there something special I'm missing about the .val() property?

Problem/Solution:

I forgot that there are multiple "#txtaFilter"'s on the page when I removed the $(this).siblings("#txtaFilter"), So it was accessing the hidden one instead of the visible one. Sorry about that, guess I was wrong on the question too :/

Upvotes: 1

Views: 692

Answers (2)

Ram
Ram

Reputation: 144689

You can use val method:

$("#txtaFilter").val(function(i, oldVal){
   return oldVal + value
});

Upvotes: 5

Musa
Musa

Reputation: 97672

Use .val() to get the text of a textarea.

$(document).ready(function () {
    $(".selector").bind('change', function () {
        var value = $(this).val();
        var txtaFilter = $("#txtaFilter");
        txtaFilter.val(txtaFilter.val()+value);
        $(this).children('option:eq(0)').attr('selected', true);
    });
});

Upvotes: 3

Related Questions