Javascript - MeteorJS disable a button for a specific time and user depending on a variable that I could set manually

help
1

I have a submit button in JS on a page for my users. I want to disable this button for different time (1 day/5 days/ 1 week) depending on a var that I collect from another radio button on my admin page. How could I do it?

—EDITED—

Please note that I need the function for a MeteorJS, javascript file.

So these are the Admin options:

<template name="dashboard">
<form name="notification">
                <label><input type="radio" name="timer" id="1day" value=1>1 day</label>
                <br>
                <label><input type="radio" name="timer" id="3day" value=3>3 days</label>
                <br>
                <label><input type="radio" name="timer" id="5day" value=5>5 days</label>
                <br>
                <label><input type="radio" name="timer" id="week" value=7>1 week</label>
                <br>
                <label><input type="submit" name={{data.profile.lastName}} id="timer"><i class="fa fa-bell" aria-hidden="true"></i> Send</label>

            </form>

his options are relative to a user that I select before. The timer has to be set for the access to a questionnaire. I want to disable the button that lead to the questionnaire for the time I set as Admin. For every user I’ve defined a Schema for the Answers I’m collectiong like this(is a Mongo DB collection)

Schemas.Answers = new SimpleSchema({   createdAt: {
        type: Date,
        autoValue: function() {
          if (this.isInsert) {
            return new Date();
          }
        }   },   
answer: {
        type: [Number],
        optional: true   },   
userId: {
        type: String   },   
feel: {
        type: Number,
        optional: true   },   
timer: {
        type: Number,
        optional: true   } });

Note that I want to store the value selected by the admin in the timer field of the collection and then read it from the user side to set the button enable or disable.

THis is the button:

<h2>Do you want to continue to the questionnaire?</h2>
      <br>
      <a href="{{pathFor 'questionnaire'}}" class="btn btn-primary" id="goon">Go On</a>

Obviously the button has to be enable/disable even if the user will logout/leave the App(/webpage).

2

I guess you are storing notification form in database, so I think you don’t need a timer but a reactive helper that will return true or false according to values you have in database.

1 Like
3

Ehm I’m not sure about the answer: I’m storing the value of the timer because I thought that I could rewrite the value of the disable-time to allow the user to enter to the questionnaire page and on the app I could read this value on the Schema.
Otherwise how could I send this value from the admin to the users?

4

When you say “timer”, I understand js setTimeout. You don’t need that.

If you have start time and duration; you can write a function (helper) that will compare if start + duration is greater than current time.

If your start time and duration values are stored in a document in mongodb they will be reactive.

1 Like
5

I see. and how could I disable the relative button with js? I mean reading this value from the db.

6 
<button type="button" {{disabled}}>Click Me!</button> 

disabled(){
     return mustDisable ? "disabled" : "";
}
7

I’ve tried it. And it doesn’t work! I click but the button is still available…

8

Without access to a repo, so I can formulate an answer specific to your application, the best I can do is explain generically.

So, let’s start with “collecting the radio button”. What @baris is suggesting is that you use the radio button to set a value in a MongoDB collection. Let’s say you have a collection called controls. You use a Meteor template event handler for the admin page to set a value in that collection (say the timestamps between which the button is to be disabled).

To provide the “disabling a button”, the client subscribes to a publication of the controls collection in the onCreated. Then, using a template helper, you return the appropriate find on that collection. The helper checks the current time is between the timestamps and returns 'disabled' or '' as appropriate.

There are a couple of things you also need to do:

  1. You need to ensure the helper runs frequently to re-check (say every minute). If the values in the collection don’t change, there will be no reactive re-running. That means using something like a Meteor.setInterval in the onCreated which updates the current time in a ReactiveVar. You .get() the value of that inside the helper.
  2. It’s JavaScript, so someone will try to hack the disabled flag to gain access to the button. That means that you must perform server-side checks whenever the button’s clicked, to ensure it’s not being hacked.