在Meteor TODO应用程序中添加另一个字段以形成表单？

Question

I'm very new to Meteor and following along in the official docs their TODO APP. 我是Meteor的新手，在官方文档中关注他们的TODO APP。 So far so good but I want to add a second input to the example which has only a place for inputing and storing " text ." 到目前为止，还不错，但是我想在示例中添加第二个输入 ，该输入仅具有用于输入和存储“ 文本 ”的位置。 I am trying to add a " quantity " field so that a user can input text and quantity. 我正在尝试添加“ 数量 ”字段，以便用户可以输入文本和数量。

If I go through the command line and type: 如果我通过命令行输入：

db.tasks.insert({text: "apples", quantity: 4, createdAt: new Date() });

I can get the quantity field to correctly populate. 我可以获取数量字段以正确填充。 However, I cannot get the data into the quantity field when submitting through the DOM. 但是，通过DOM提交时，我无法将数据输入到“数量”字段中。 Here is my HTML: 这是我的HTML：

<head>
  <title>Todo List</title>
</head>

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
      <form class="new-task">
        <label for="text">TEXT:</label>
        <input type="text" name="text" placeholder="Type to add new tasks" />
        <label for="text">NUMBER:</label>
        <input type="text" name="quantity" placeholder="Quantity" />
        <input type="submit" class="submit"/>
      </form>

    </header>


    <ul>
      {{#each tasks}}
<!--       this inserts the template called "task" -->
        {{> task}}
      {{/each}}
    </ul>

  </div>

</body>

<template name="task">
   <li class="{{#if checked}}checked{{/if}}">
  <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
    <span class="text">{{text}}{{quantity}}</span>
           <button class="delete">&times;</button>


  </li>
</template>

Here is my JS: 这是我的JS：

Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient){
  //This code only runs on client
  Template.body.helpers({
    tasks: function () {
        // Show newest tasks at the top
      return Tasks.find({}, {sort: {createdAt: -1}});
    }
  });
  Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
       console.log(event)

      // Get value from form element
      var text = event.target.text.value;
      var quantity = event.target.text.value;


      // Insert a task into the collection
      Tasks.insert({
        text: text,
        quantity: quantity,
        createdAt: new Date() // current time
      });

      // Clear form
      event.target.text.value = "";
    }
  });

   Template.task.events({
    "click .toggle-checked": function () {
      // Set the checked property to the opposite of its current value
      Tasks.update(this._id, {
        $set: {checked: ! this.checked}
      });
    },
    "click .delete": function () {
      Tasks.remove(this._id);
    }
  });

}

You'll see that I have not completed the tutorial and have made some modifications to the HTML. 您会看到我尚未完成本教程，并且对HTML进行了一些修改。

I'm pretty sure I'm messing up my JS. 我很确定自己搞砸了JS。 Any help would be greatly appreciated! 任何帮助将不胜感激！

Answer 1

You have: 你有：

var text = event.target.text.value;
var quantity = event.target.text.value;

These two are going to be the same. 这两个将是相同的。

Instead use: 而是使用：

var text = $('input[name="text"]').val();
var quantity = $('input[name="quantity"]').val();

Answer 2

Just playing around with the JS, I got it to post when I changed this: 只是在玩JS时，我将其更改后发布了：

   // Get value from form element
      var text = event.target.text.value;
      var quantity = event.target.text.value;

To this: 对此：

  // Get value from form element
  var text = event.target.text.value;
  var quantity = event.target.quantity.value;

在Meteor TODO应用程序中添加另一个字段以形成表单？

问题描述

2 个解决方案

解决方案1
1 2015-12-31 19:42:35

解决方案2
1 2015-12-31 19:56:13

在Meteor TODO应用程序中添加另一个字段以形成表单？

问题描述

2 个解决方案

解决方案1 1 2015-12-31 19:42:35

解决方案2 1 2015-12-31 19:56:13

解决方案1
1 2015-12-31 19:42:35

解决方案2
1 2015-12-31 19:56:13