Question

我正在尝试创建一个在输入字段中输入后保存信息的应用程序！我在添加具有多个输入字段的表单时遇到了一些问题。

这些是我的HTML和JS文件：

import { Template } from 'meteor/templating';

import { Tasks } from '../api/tasks.js';

import './body.html';

Template.body.helpers({
  tasks() {
    // Show newest tasks at the top
    return Tasks.find({}, { sort: { createdAt: -1 } });
  },
});

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

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

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

  },
});

<body>
  <div class="container">
    <header>

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

<template name="task">
  <li>{{text}}</li>
</template>

请告诉我如何添加2个以上的输入，然后点击提交按钮显示？

Answer 1

目前还不清楚你的问题是什么。这可能就像包含第二个文本字段并将其与第一个字段同时保存到mongo一样简单吗？

HTML：

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

JS：

const target = event.target;
const text = target.text.value;
const text2 = target.text2.value;

Tasks.insert({ text, text2, createdAt: new Date() });

Answer 2

我建议在Meteor中查看这个非常棒的表单管理包：https://github.com/aldeed/meteor-autoform

如何在Meteor.js中提交所有表单的元素？

2 个答案: