CODEWITHSUNDEEP
javascriptjquery
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

capturing the text value of a textarea with jQuery

I have a bunch of <textarea> elements on my page all with the same "name" attribute. I'm trying to capture the text of the textarea that is currently in focus:

$('body').on('click', '[name=btnAddQuestion]', function () {

    questionText = $("[name=stem]").val();
    console.log('questionText: ' + questionText);

});

But I can only get it to capture the text of the first <textarea> in the list. Is there a way of doing this without having to give each textbox a unique ID?

Thanks!

Here is a jsfiddle:

http://jsfiddle.net/9b2XA/2/

Upvotes: 0

Views: 305

Answers (5)

user2121189
user2121189

Reputation: 80

You could store the last focused textareas text in a variable and then do what ever you need to do with it when you click the button:

$(document).ready(function () {
    var txt = '';
    $('textarea[name="stem"]').blur(function () {
        txt = $(this).text();
    });
    $('input[name="btnAddQuestion"]').click(function () {
        alert(txt);
    });
});

Upvotes: 1

Yair Nevet
Yair Nevet

Reputation: 13003

Use this code:

$('body').on('click', '[name=btnAddQuestion]', function () {    
  questionText = $("[name=stem]:focus").val();
  console.log('questionText: ' + questionText);    
});

UPDATE:

As others mentioned here, when clicking the button, your text-area is loses its focus because the button have it now and in that case you have to maintain the last focused element and use it in your click handler function:

var lastFocusedTextArea = null;

$('textarea[name=stem]').focus(function (e) {
    lastFocusedTextArea = e.currentTarget;
});

$('body').on('click', '[name=btnAddQuestion]', function () { if(lastFocusedTextArea.is('textarea')){ questionText = lastFocusedTextArea.val(); console.log('questionText: ' + questionText); } });

Upvotes: 1

plalx
plalx

Reputation: 43718

Try using the :focus selector.

$("[name=stem]:focus").val();

You can actually simply do the following:

$(document.activeElement).val();

EDIT: Actually that doesn't work since once you click the button, the textarea loses focus. I've written my answer too quickly.

However, what you could do is track which is the last textarea that had focus and use it in your click handler.

var lastFocusedTextArea = null;

$('textarea[name=stem]').focus(function (e) {
    lastFocusedTextArea = e.currentTarget;
});

Upvotes: 4

Mike Dinescu
Mike Dinescu

Reputation: 55720

If you want to get the text of each one of the text areas you will need to iterate over them:

$("[name=stem]").each(function() {
     questionText = $(this).val();  
     console.log('questionText: ' + questionText);
});

If you wan to get a reference to the text are that had focus when the user clicks the button you will have to attach a blur event handler to all the text areas and record the text area that was "last in focus" (since the focus will change when the user clicks on the button)

Upvotes: 1

JRam
JRam

Reputation: 529

Once you hit the button your textarea will lose focus, so the :focus selector will do you no good.

You can set the focus back to the last textarea once the button is clicked, and then use the :focus selector to pull the text.

http://jsfiddle.net/9b2XA/3/

In this fiddle I capture the last focused textarea and then focus it back when the button is clicked.

var lastFocus;
$("textarea").blur(function() {
    lastFocus = this;
});

$('body').on('click', '[name=btnAddQuestion]', function () {

    if(lastFocus) { lastFocus.focus(); } 
    questionText = $("[name=stem]:focus").val();
        console.log('questionText: ' + questionText);

});

Upvotes: 2

Related Questions