CODEWITHSUNDEEP
javascripthtmlformsmeteor
Sam Albert
Sam Albert

Reputation: 91

Events from multiple forms on one page in meteor

In my home.html page, I have two forms, which have been set up in the same way. The problem is one works and the other doesn't. I tried putting on of the checkboxes from the broken form into the working form, and it starting working, so I think it's an issue with specifying the form in the JavaScript Template.events code.

html: 

<template name="home">
<form> <strong>Display Factors:</strong><br> 
          <label class="display-F1"> <input type="checkbox" checked="{{displayF1}}"> 1: Cumplimiento de los objetivos del programa </label><br>
          <label class="display-F2"> <input type="checkbox" checked="{{displayF2}}"> 2: Estudiantes </label><br>
          <label class="display-F3"> <input type="checkbox" checked="{{displayF3}}"> 3: Profesores </label><br>
          </form>

          <form>
          <label class="display-strengths"> <input type="checkbox" checked="{{displayStrengths}}"> Display Strengths </label>
          <label class="display-insuff"> <input type="checkbox" checked="{{displayInsuff}}"> Display Insufficiencies </label>
          <label class="display-urgencies"> <input type="checkbox" checked="{{displayUrgencies}}"> Display Urgencies </label>
          </form>
</template>

JavaScript:

Template.home.events({
"change .display-strengths input": function (event) {
  Session.set("displayStrengths", event.target.checked);
},
"change .display-insuff input": function (event) {
  Session.set("displayInsuff", event.target.checked);
},
"change .display-urgencies input": function (event) {
  Session.set("displayUrgencies", event.target.checked);
},
"change .display-F1 input": function (event){
    Session.set("displayF1", event.target.checked);
},
"change .display-F2 input": function(event){
    Session.set("displayF2", event.target.checked);
},
"change .display-F3 input": function(event){
    Session.set("displayF3", event.target.checked);
},
});

I have other code relying on Session.get, but I'm fairly confident the problem is in this code because, in the console, Session.get('displayStrengths') returns true when appropriate, but Session.get('displayF1') always returns undefined.

Upvotes: 0

Views: 396

Answers (1)

Xinzz
Xinzz

Reputation: 2242

It seems that the problem isn't with the code you provided. Check out the demo I made with the code you provided:

http://meteorpad.com/pad/rm56RY49Gq7yyfa6D/Leaderboard

If you run it (with the chrome/firefox/whatever console on) and click on each of the selections, you should see the correct corresponding message "I got called X". You can also type in Session.keys directly into the console and you should see the expected results.

Upvotes: 2

Related Questions