Meteor App在表单中获取textarea的值

Question

我正在编写一个小的 Meteor 应用程序。表单中有一个textarea，看起来像这样：

<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>

在我的 client.js 中，我有以下用于访问文本区域值的代码：

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;
    }
});

但是，当我点击按钮添加评论时，我得到以下控制台输出：

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()

这似乎是基本的表单处理，但不知何故我无法将文本区域中的文本放入我的 javascript 代码中的变量中。我已经尝试过多种访问方式：

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

但是 none 这些对我有用，我总是得到那个错误。这几乎就像文本区域不是我的一部分 html 或者 Meteor 中有一个错误，阻止我访问文本区域。

我还检查了是否还有其他名为 comment_textarea 的东西，对我所有的项目客户端文件进行了全文搜索，但没有其他东西。

我是不是瞎了眼，忽略了什么？我如何获得该文本？

更重要的是，尽管我return false，浏览器仍然重新加载页面。会不会和之前发生的错误有关？

Answer 1

在尝试了更绝望的方法来访问该文本区域之后，我想我现在知道出了什么问题：

// 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!

所以好像我用jQuery的时候不能用.val()这个功能，正如我在其他很多问题的回答里说的那样，但是出于某种原因我不得不对待它像一个普通的 DOM 对象并使用属性 value 而不是函数 .val().

也许它特定于我的 Meteor 应用程序中的 jQuery 版本？

所以我将测试以下内容：

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

... 是的，这也有效。它还修复了重新加载问题。我想因为有错误，它甚至没有达到 return false，这就是网站重新加载的原因。

Answer 2

您正在使用按钮的 click 事件，在该事件中，textarea 不可用。您需要将事件更改为 submit form。首先，将 id 放入您的表单中，将按钮更改为类型 submit 并将代码更改为

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

}

Meteor App在表单中获取textarea的值

Meteor App get value of textarea in form

javascript

forms

text

textarea

meteor