Meteor App在表单中获取textarea的值

Posted 2023-05-07

【中文标题】Meteor App在表单中获取textarea的值

【英文标题】：Meteor App get value of textarea in form

【发布时间】：2016-03-28 03:38:18

【问题描述】：

我正在编写一个小 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 中，我有以下代码用于访问 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;
    
);

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

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

这似乎是基本的表单处理，但不知何故，我无法将 textarea 中的文本放入我的 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 中有一个错误，它阻止我访问 textarea。

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

我只是盲目并忽略了某些东西吗？我如何获得该文本？

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

【问题讨论】：

我不知道 'Meteor' 是做什么的，但你的 textarea 没有类名和 id。可能是这个问题吗？

@Franco 啊，我改了很多次的代码，但是当我尝试类thingy时有一个类名:)

好吧，我只是想知道。我从未使用过“Meteor”，这是引起我注意的第一件事。

@Franco 我编辑了这个问题，为了完整起见，感谢您指出。如果您不这样做，其他人可能会认为这是缺少课程的问题。

【参考方案1】：

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

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

【讨论】：

这向我展示了根本问题。我不必为按钮元素提供类型提交，但解释为什么它没有按我的计划工作对它很重要。谢谢。

【参考方案2】：

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

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

... 是的，这也有效。 它还修复了重新加载问题。我猜因为出现错误，它甚至没有返回 false，这就是网站重新加载的原因。