2015-12-21 79 views
1

我正在寫一個Meteor應用程序。有在表單中的textarea,它看起來像這樣:流星應用程序獲取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的文本到我的javascrip變量t代碼。我已經嘗試訪問它的變體衆多:

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,瀏覽器仍然重新加載頁面。它可能與之前發生的錯誤有關嗎?

+0

我不知道是什麼「流星」做,但你的文字區域沒有類名和沒有ID。可能是這個問題? – Franco

+0

@Franco啊我改變了那麼多次的代碼,但是當我嘗試上課時,有一個班名:) – Zelphir

+0

好吧,我只是想知道。我從來沒有使用'流星',這是第一件引起我注意的事情。 – Franco

回答

2

您正在使用按鈕的click事件,在該事件中,textarea不可用。您需要將活動更改爲submit form。首先,把ID到表單中,更改按鈕進入submit型和更改代碼到

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

} 
+0

這向我展示了潛在的問題。我不必爲按鈕元素提供類型提交,但解釋爲什麼它不起作用,因爲我計劃它很重要。謝謝。 – Zelphir

1

試圖訪問textarea的更讓人絕望的方式後,我想我現在知道什麼是錯的:

// 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,這就是網站重新加載的原因。