javascript - Meteor App在表单中获取textarea的值

Question

我正在编写一个小的 Meteor 应用程序。表单中有一个文本区域，如下所示:

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

但这些都不适合我，我总是会遇到该错误。这几乎就像 textarea 不是我的 html 的一部分，或者 Meteor 中有一个错误，阻止我访问 textareas。

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

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

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

Answer 1

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

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

}