CODEWITHSUNDEEP
javascriptformsmeteortexttextarea
Zelphir Kaltstahl
Zelphir Kaltstahl

Reputation: 6189

Meteor App get value of textarea in form

I am writing a little Meteor app. There is a textarea in a form, which looks like this:

<form name="comments-form">
    <label for="textarea">Comment:</label><br>
    <textarea cols="40" rows="10" name="comment_textarea" class="comment_textarea">Write your comment here.</textarea><br>
    <button class="btn btn-success js-add-comment">add comment</button>
</form>

In my client.js I have the following code for accessing the value of the textarea:

EVENT_HANDLED = false;

Template.website_item_details.events({
    "click .js-add-comment": function(event) {
        var comment_text = event.target.comment_textarea.value;

        if(Meteor.user()) {
            Comments.insert({
                created_by: Meteor.user()._id,
                text: comment_text,
                website_id: this._id
            });
        }

        return EVENT_HANDLED;
    }
});

However, when I click the button to add the comment, I get the following console output:

TypeError: event.target.comment_textarea is undefined
["click .js-add-comment"]()
 client.js:103
Template.prototype.events/eventMap2[k]</</<()
 blaze.js:3697
Template._withTemplateInstanceFunc()
 blaze.js:3671
Template.prototype.events/eventMap2[k]</<()
 blaze.js:3696
attached_eventMaps/</</</<()
 blaze.js:2557
Blaze._withCurrentView()
 blaze.js:2211
attached_eventMaps/</</<()
 blaze.js:2556
HandlerRec/this.delegatedHandler</<()
 blaze.js:833
jQuery.event.dispatch()
 jquery.js:4690
jQuery.event.add/elemData.handle()

This seems to be basic form handling, but somehow I can't get that text in the textarea into a variable in my javascript code. I've already tried a multitude of variants of accessing it:

document.getElementsByClass()[0].value
$('.comment_textarea').get(0).val()  // there should only be one such text area anyway
event.target.comment_textarea.value;

But none of those work for me, I always get that error. It's almost like the textarea was not part of my html or there is a bug in Meteor, which prevents me from accessing textareas.

I also checked whether there are other things named comment_textarea with a fulltext search on all of my projects clientside files, but there isn't any other.

Am I simply blind and overlooking something? How do I get that text?

What's more is, that although I return false, the browser still reloads the page. Could it be related to the error happening before?

Upvotes: 1

Views: 1806

Answers (2)

Thai Tran
Thai Tran

Reputation: 9935

You are using the click event of the button and on that event, the textarea is not available. You need to change the event into submit form. First, put the id into your form, change the button into type submit and change the code into

"submit #your-form-id": function(event) {
    event.preventDefault();
    var comment_text = event.target.comment_textarea.value;
    .....

}

Upvotes: 2

Zelphir Kaltstahl
Zelphir Kaltstahl

Reputation: 6189

After trying even more desperate ways to access that textarea, I think I know now what's wrong:

// var comment_text = event.target.comment_textarea.value;
// var comment_text = document.getElementByName('comment_textarea').value;
// var comment_text = document.getElementByTagName('textarea')[0].value;
// var comment_text = $('textarea').get(0).val();
// var comment_text = $('textarea').get(0).text();
var comment_text = $('textarea').get(0).value;  // finally working!

So it seems that when I use jQuery, I can't use the .val() function as stated in my other answers to many other questions, but for some reason I have to treat it like a normal DOM object and use the attribute value instead of the function .val().

Maybe it's specific to the jQuery version in my Meteor app?

So I will test the following:

var comment_text = $('textarea.comment_textarea').get(0).value;

... Yes, that also works. Also it fixes the reload issue. I guess since there was an error, it didn't even get to return false and this is why the website reloaded.

Upvotes: 1

Related Questions