Save to collection

help
1

Hi,
I used to use meteor some time ago, and now trying to go back for a pet project that I have.
I am having trouble saving 2 text fields into a collection. Simple as that.
Followed the official tutorial, not working. Followed some videos on youtube, not working…
what puzzles me the most is that different sources are doing it very differently.
Anyone here has a simple example/tutorial to help?
Thanks!

2

This is pretty much what I do:

Template.signup.events({
    'click button.next'(event, inst) {
        const name = inst.find('#name').value;
        const email = inst.find('#email').value;
        const phone = inst.find('#phone').value;
        Meteor.call('signups.insert', {
            name,
            email,
            phone,
        });
    },
});

If you post an example that isn’t working, we can help you debug it?

3

Hi @coagmano thank you for your answer.
That is exactly what I mean, your code looks nothing like mine, neither like on the tutorial.

I have:

  • on a folder at root:
    import { Mongo } from ‘meteor/mongo’;
    export const roadmapsDB = new Mongo.Collection(‘roadmap_items’);

  • html file:

<template name="roadmaps_new">
  <br>
  <h2>New Roadmap item</h2>

  <form class="ui form" id="new_roadmap_item">
  <div class="field">
    <label>Title</label>
    <input type="text" name="roadmap_item_title" placeholder="Title">
  </div>
  <div class="field">
      <label>Description</label>
      <textarea name="roadmap_item_description" placeholder="Description"></textarea>
    </div>
  <div class="field">

  </div>
  <button class="ui button" type="submit">Save</button>
</form>
  • and the matching js:
import { roadmapsDB } from '../collections/roadmapsCollection.js'

Template.roadmaps_new.events({
  'submit .ui form'(event) {
    // Prevent default browser form submit
    event.preventDefault();
    console.log(event);

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

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

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

Did you spot something?

4

I’ve spotted a few things.
First thing is that your event listener isn’t targetting the form.
This 'submit .ui form'(event) { targets a form inside an element with the class ui (like css). You want to target 'submit form.ui' because your form has the class ui directly on it.

Second thing, target.text.value throws an error because there’s no input named text on the form. Easiest thing is to just call reset on the form: target.reset()

Third thing, calling roadmapsDB.insert will only work while you have the insecure package installed (added by default in new projects). The Blaze tutorial starts by using this insecure version before converting the call to methods later on and restricting who can call what methods on the server side. Check that you have the insecure package installed

Also, I didn’t know you could access form inputs by name from the form element. It’s much nicer than what I was doing by looking up the ids, so I’ll start doing that as well