CODEWITHSUNDEEP
javascriptjquerymeteor
mhlavacka
mhlavacka

Reputation: 91

How to make form appear on click event in Meteor?

On the click of a button I need to make a form appear to help add content on the single-page. I made a form and a button.

<template name="addPost">   
        <button class="clickable">Add your dream</button> 
        <form>
            {{#if clickable}}
            <input type="text" name="title" class="title" placeholder="Title" required>
            <textarea class="story" placeholder="What did you dream about tonight?"></textarea>
            <input type="text" name="author" class="author" placeholder="Pen name" required>
            <input type="submit" value="Publish">
            {{/if}}
        </form>
</template>

But I can't figure out how to call back from click event by the client to HTML to make the form appear after the button is clicked.

if (Meteor.isClient) {
  Template.addPost.events({
    'click .clickable': function() {
      return;
  });
};

Upvotes: 0

Views: 885

Answers (1)

Ethaan
Ethaan

Reputation: 11376

you can use template event/helpers to accomplish this.

//Setting the session to false by default
Session.setDefault('visible',false)

Js

Template.addPost.events({
  'click .clickable':function(){
    Session.set("visible",true)
  }
})

Template.addPost.helpers({
  showForm:function(){
  var show = Session.get('visible');
  if(show === true){
     return true;
  }else{
     return false;
   }
  }
})

//to set the session to false on refresh.
Template.addPost.destroyed = function(){
  Session.set('visible',false)
}

now on the HTML

<template name="addPost">
  {{#if showForm}}
        <input type="text" name="title" class="title" placeholder="Title" required>
        <textarea class="story" placeholder="What did you dream about tonight?"></textarea>
        <input type="text" name="author" class="author" placeholder="Pen name" required>
        <input type="submit" value="Publish">
  {{else}}
        <span> Please click the button to show the form</span>
  {{/if}}
</template>

Upvotes: 1

Related Questions