Question

我跟随Meteor Tuturial（https://www.meteor.com/tutorials/blaze/creating-an-app），以下是HTML和JavaScript代码的一部分：

HTML

 <body>
  <div class="container">`enter code here`
    <header>
      <h1>Todo List</h1>

      <form class="new-task">
        <input type="text" name="text" placeholder="Type to add new tasks" />
      </form>

    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

的JavaScript

    Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();

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

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

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

我想知道如何在HTML表单中添加另一个输入并访问Java Script中的另一个输入。

例如：

<input type="text" name="city" placeholder="Type to add city" />

Answer 1

如果您将示例输入插入HTML，则新的javascript应为：

Template.body.events({
"submit .new-task": function (event) {
  // Prevent default browser form submit
  event.preventDefault();

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

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

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

如何从HTML输入中获取多个值？

1 个答案: