Noob: How to make click event hide template?

help
1

Hi!
I want to hide a form when the user submit, but I cant get it to work. This is what my code looks like,

main.html

<head>
  <title>Image api</title>
</head>

<body>
{{> linkForm}}
</body>

<Template name="linkForm">
  {{#if submit}}
    <form>
      <input type="text" class="linkImage" name="linkImage" placeholder="Lim inn din lenke">
      <input type="submit" class="submitImage" value="submit!">
    </form>
    {{/if}}
</Template>

main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Meteor } from 'meteor/meteor'
import './main.html';


Template.linkForm.events({
'submit': function(evt){
    evt.preventDefault();
    return true;
    linkImage = event.target.linkImage.value;
    check(linkImage, String);
    if(linkImage.indexOf(".jpg") !== -1){
    Meteor.call('methodSendToApi', linkImage);
    console.log(linkImage);


    }
  }
});
2 
<head>
  <title>Image api</title>
</head>

<body>
{{> linkForm}}
</body>

<Template name="linkForm">
  {{#unless formIsSubmitted}}
    <form>
      <input type="text" class="linkImage" name="linkImage" placeholder="Lim inn din lenke">
      <input type="submit" class="submitImage" value="submit!">
    </form>
    {{/unless}}
</Template>

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Meteor } from 'meteor/meteor'
import './main.html';

Template.linkForm.onCreated({
  this.formSubmitted = new ReactiveVar(false);
});

Template.linkForm.helpers({
  formIsSubmitted: function () {
    return Template.instance().formSubmitted.get();
  }
});

Template.linkForm.events({
'submit': function(evt, template) {
    evt.preventDefault();
    // return true;
    linkImage = event.target.linkImage.value;
    check(linkImage, String);
    if (linkImage.indexOf(".jpg") !== -1) {
      template.formSubmitted.set(true);
      Meteor.call('methodSendToApi', linkImage);
      console.log(linkImage);
    }
  }
});
3

Thanks, but I get a error

Errors prevented startup:

While processing files with ecmascript (for target web.browser):
client/main.js:7:6: Unexpected token (7:6)

Your application has errors. Waiting for file change.

EDIT: function() was missing after Template.linkForm.onCreated

It works now. I just need to learn how this reactive things work, but I got a better understanding after some google work.

4

Oops. Sorry about that. Yes, function() was missing.

1 Like