Difficulty getting value of textarea using jquery

Question

I have the following:

<div class="tab-pane" id="message">
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
    <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
    <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

when I add:

if($(this).is(":contains(Cancel)"))  {

    var text= $("#send_message").val();

    log.console(text)

I get the correct value

If I change the line to:

    var text= $(this).find("#send_message").val();

I get undefined logged to console. Why is this?

Here is the full jQuery function:

$(function(){
    $('#message').on("click", "a", function(){

        if( $(this).is(":contains(OK)") ) {

            console.log("im in OK!!");
        }
        else if( $(this).is(":contains(Cancel)") )  {

        //  var text= $("#send_message").val();
            var text= $(this).find("#send_message").val();
            console.log(text);
            console.log("im in cancel!!");
        }
    });
});

find() looks for elements below the DOM node you're currently in (in this case, $(this) refers to your last a.btn.btn-large.btn-info link). You want to use .closest() instead — Derek
– Derek, Commented Aug 12, 2013 at 20:34
listen to a combination of the two comments above this. You should never have two elements with the same id, so whatever.find('#send_message') should always been the same as $('#sendMessage') — Phillip Schmidt
– Phillip Schmidt, Commented Aug 12, 2013 at 20:41
^ provided that whatever is a parent of the element whose id is sendMessage. Which it isn't here. So i kinda worded that wrong haha — Phillip Schmidt
– Phillip Schmidt, Commented Aug 12, 2013 at 20:42

Sergio · Accepted Answer · 2013-08-14 07:33:40Z

1

The problem here is that .find() Gets the descendants of each element

Description: Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.

That means you are clicking in a <a> that is after the <textarea> in the DOM, so .find() will not look for it backwards.

Anyway to find a element who has ID you need just $("#send_message"), and .val() to get its value.

Demo here

edited Aug 14, 2013 at 7:33

answered Aug 13, 2013 at 23:13

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

federicot · Accepted Answer · 2013-08-12 20:55:44Z

1

Make sure you're closing your div with id message, and also, use $('#send_message'). There's absolutely no point in using find with an id selector because as you know ids are intended to be unique (otherwise it's invalid HTML).

Quoting the W3C:

A unique identifier for the element. There must not be multiple elements in a document that have the same id value.

answered Aug 12, 2013 at 20:55

federicot

12.3k19 gold badges71 silver badges111 bronze badges

1 Comment

user1592380 Over a year ago

I think I figured it out: $('#message').on("click", "a", function() sets this to be just 'a' elements. obviously textarea is not included in that - sorry - Bill

Collectives™ on Stack Overflow

Difficulty getting value of textarea using jquery

2 Answers 2

Demo here

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo here

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related