How to display the entire Meteor.js form?

M

Muxailo2017-10-07 18:35:53

JavaScript

Muxailo, 2017-10-07 18:35:53

Guys, I don't know how to display 1+ input.
There is such a code: 1) html 2) js
Displays only 1 input, when I want to add a second one, it bugs ...
PS I need to display 2-3 inputs by clicking on the button.

<body>
  <div class="container">
    <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>

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

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
    });

    // Clear form
    target.text.value = '';
  },
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Muxailo, 2017-10-09
@Muxailo

Answer:
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() });