How to capture a event on changing value in a text box -

help
1

Hello,
I have a html form with the below input element allowing users to enter a number. What I need to accomplish is on entering a number (number key press) i need to collect the take a value and do some calculation and display the result reactively?
What meteor event is available for me to accomplish that? how do i capture the data? so that i can do the calculation and update the DOM

Any help or pointer would be greatly help.
Jay

2 
Template.myTemplateName.events({
  'keyup #my-input-element': function(event) {
      if (event.which >= 48 && event.which <= 57) {
        var numberPressed = event.which - 48;
      }
      // Do whatever you want with numberPressed
      // like set a Session value that is reflected in the DOM via a helper
      var calculatedResult = numberPressed * 100;
      Session.set('calculatedResult', calculatedResult);
  });
}

And in the accompanying html file you would have something like:

<template name="myTemplateName'>
  <input type="text" id="my-input-element" />
  Last number typed times 100: {{calculatedResult}}
</template>

But to wire these up, you’d need:

Template.myTemplateName.helpers({
  calculatedResult: function() {
    return Session.get('calculatedResult');
  }
});

Just wrote all this off the top of my head, so apologies if I’ve made a mistake somewhere, but this is the basic gist of it.

3 
Template.mytemplate.events({
  'input #element': function (event, template) {
    Session.set("whatever", event.currentTarget.value);
  }
});

this will change reactively as you type.

Generally, a good place to start is: https://developer.mozilla.org/en-US/docs/Web/Events

5 Likes
4

Hey! There’s an interesting package - manuel:viewmodel - which might be helpful for more complex cases. Take a look at examples here: http://viewmodel.meteor.com

I haven’t used it yet, and would love to hear other fellows’ thoughts on pros & cons of such approach.