为什么我会收到这些输入元素的空值？答案

【问题标题】：Why am I receiving null values for these input elements?为什么我会收到这些输入元素的空值？
【发布时间】：2015-12-25 16:49:14
【问题描述】：

我正在开发基于流星的应用程序，并根据表单输入对我的数据库进行更新。当我在我的 mongodb 中查找数据时，这些字段的值为 null，但事实并非如此，因为我可以看到它们的值发布在 url 中，而且我也是输入它们的人。这是我目前实现的代码。

<template name="room">
   <div class="container">
      <br>
      <br>
      <br>
      <br>
      <h1>{{currentUser.username}} Cards</h1>
      <hr>
      <h2>Fill out the form below to add a card</h2>
      <form class="new-card">
         <input type="text" name="notes" placeholder="Enter some notes on the sprint" />
         <input id="good-checkbox" type="checkbox" name="category" value="Good">Good
         <input id="bad-checkbox" type="checkbox" name="category" value="Bad">Bad
         <!-- <button class="new-card" type="submit">Add Card</button>-->
      </form>
      <div class="col-xs-12 col-sm-12">
         {{#each cards}}
         {{> card}}
         {{/each}}
      </div>
      <br>
      <br>
      <br>
      <h1>Revealed Cards</h1>
      <hr>
   </div>
</template>

Meteor.js：

Router.configure({
    layoutTemplate: 'main-layout'
});
Router.route('/', {
    name: 'home',
    template: 'login'
});
cards = new Mongo.Collection("cards");
if (Meteor.isClient) {
    Router.route('/room', {
        name: 'room',
        template: 'room'
    });
    if (!Meteor.user()) {
        if (Meteor.loggingIn()) { /*we dont want to do anything*/ } else {
            alert("Sorry, you must be logged in first to use our services.");
            Router.go('/');
        }
    }
    Template.room.helpers({
        cards: function() {
            //return all cards in db sort by newest
            return cards.find({}, {
                sort: {
                    createdAt: -1
                }
            });
        }
    });
    Template.body.events({
        "submit .new-card": function(event) {
            //prevent the browsers default behavior for this event
            event.preventDefault();
            var notes = event.target.text.value;
            var good = $('#good-checkbox:checked').val();
            var bad = $('#bad-checkbox:checked').val();
            if (!good && !bad || !notes || notes.length === 0) {
                alert("No fields can be left blank");
            } else {
                cards.insert({
                    notes: notes,
                    good: good,
                    bad: bad,
                    createdAt: new Date(),
                    createdBy: Meteor.user().username
                });
            }
            event.target.text.value = "";
        }
    });
    Template.room.events({
        "click #addCard": function() {
            alert("inserted card");
            cards.insert({
                text: null,
                category: null,
                createAt: new Date(),
                createdBy: Meteor.user().username
            });
        }
    });
    Accounts.ui.config({
        passwordSignupFields: "USERNAME_ONLY"
    });
}

if (Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

【问题讨论】：

尝试使用event.target.value 代替event.target.text.value 来代替notes。是否有任何控制台错误？
我找到了解决办法。我还需要将其命名为 Template.room.helpers 而不是 template.body.helpers，因为事件是通过按钮单击并提交触发的，对我来说使用 jquery 比使用事件参数更好。

标签： javascript jquery html mongodb meteor

【解决方案1】：

正如 Shaunak D 在 cmets 中已经指出的那样，submit .new-card 事件处理程序中的 notes 变量是 undefined。使用event.target.notes.value 而不是event.target.text.value。

if (Meteor.isClient) {
    Template.room.helpers({
        cards: function() {
            //return all cards in db sort by newest
            return cards.find({}, {
                sort: {
                    createdAt: -1
                }
            });
        }
    });
    Template.room.events({
        "submit .new-card": function(event) {
            //prevent the browsers default behavior for this event
            event.preventDefault();
            var notes = event.target.notes.value;
            var good = $('#good-checkbox:checked').val();
            var bad = $('#bad-checkbox:checked').val();
            if (!good && !bad || !notes || notes.length === 0) {
                alert("No fields can be left blank");
            } else {
                cards.insert({
                    notes: notes,
                    good: good,
                    bad: bad,
                    createdAt: new Date(),
                    createdBy: Meteor.user().username
                });
            }
            event.target.notes.value = "";
        }
    });
}

这是MeteorPad。

【讨论】：