CODEWITHSUNDEEP
javascriptjqueryhtml
Mental Zenga
Mental Zenga

Reputation: 90

Cannot retrieve text of dynamically created textarea jquery

textToolkit= '<textarea class="textInput" style="width:400px; height:200px;"></textarea>';

//adding the textToolkit in controls
$('#controls').html(textToolkit+theUpdateButton);

//LATER IN CODE AFTER CLICK OF A BUTTON
singleData=$('.textInput').val();

The singleData is empty even after writing in the textarea... How can i get that textarea's text? :/

Upvotes: 2

Views: 1380

Answers (3)

Roy M J
Roy M J

Reputation: 6938

Problem is with your click function. The normal 

$(".someclass").click(function(){

});

will be rendered when the DOM loads. But during that time, the particular class someclass will not be present as its dynamically added. So you need to bind it or use the live click function as follows : 

$(document).on("click", ".someclass", function(){
    singleData = $('.textInput').val();
});

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

Reference : http://api.jquery.com/on/#direct-and-delegated-events

Upvotes: 2

Ringo
Ringo

Reputation: 3965

Please make sure all of element on page are loaded.

$(function(){
 singleData=$('.textInput').text();
});

Upvotes: 0

Shyju
Shyju

Reputation: 218722

You need to read the value on some event, Ex : when clicking on the button.

Also make sure to use jQuery on method to add the clicking event binding code. on method works for current and future(dynamically added to DOM) elements.

$(function(){

 var textToolkit= '<textarea class="textInput" style="width:400px; height:200px;"></textarea>';

var theUpdateButton="<input type='button' id='btnGet' value='get' />";
//adding the textToolkit in controls
$('#controls').html(textToolkit+theUpdateButton);

$(document).on("click","#btnGet",function(e){    
    e.preventDefault();
    var singleData=$('.textInput').val();
    //This is not the best jQuery selector. 
    //You may change according to your specific UI structure.
    alert(singleData);
});

});

Here is a working sample http://jsbin.com/eNigijIY/2/

Upvotes: 1

Related Questions