Reactively counting the number of form inputs completed in Meteor.js - forms

Question

I've been struggling with this implementation so I figure I'd give the good ol' community here at Stack Overflow a shot at solving my problem.
So i got a standard personal information form. The form id is "personal-form".
I have a helper method called {{numFormsCompleted}} from the template.
Here is my implementation of the method --
numFormsCompleted : function(){
var count = 0;
var form = document.getElementById("quote-form");
console.log(form);
if(form == null)
return 0;
else{
for(i = 0; i < form.length; i++){
value = form.elements[i].value;
if(value != "" || value != null)
count++;
}
console.log(count);
return count;
}
}
The form is showing up as null. Anyone know why?

Answer 1

Your template may or may not have been rendered when your code runs, therefore instead of providing it as a helper of your template, you can run your function at your template's rendered callback, and then assign the return value to a reactive session variable.
Template.myFormTemplate.rendered = function() {
Session.setDefault("formElementCount", 0);
var count = 0;
var form = this.find("#quote-form");
console.log(form);
if(!!form){
for(i = 0; i < form.length; i++){
value = form.elements[i].value;
if(value != "" || value != null)
count++;
}
console.log(count);
Session.set("formElementCount", count);
}
}
and then as your helper in your template
Template.myFormTemplate.numFormsCompleted = function() {
var count = Session.get("formElementCount");
return count;
}
This way, whenever your form template gets rendered, it will reactively give you the element count in your helper and as an added bonus, you can use it from within other templates as well.