Get event from HTML


#1

I understand this might be out of the scope of Meteor help but since my app is made in Meteor I thought of asking for help here. I have a responsive table which I have copied and edited the content from this link (https://codepen.io/marclundgren/pen/hgelI) and I would like to receive events that will return an array when ticking the checkboxes of the table like below.

   Frequency 	Volume 	Modulation

Pt
Phi
Eta

The array will be the bind column and row for example:
[Frequency:Pt, Volume:Phi, Modulation:Eta]

Here is the current version of my table.

<head>
    <title>ipsosboard</title>
    <meta charset="utf-8">
   </head>

   <body>
       {{> ipsosboard}}
   </body>
   <template name="ipsosboard">
       <h3>Map data to parameters</h3>
       <table class="responsive-table-input-matrix">
		       <thead>
		           <tr>
			             <th></th>
			             <th>Frequency</th>
			             <th>Volume</th>
                   <th>Modulation</th>
		           </tr>
		       </thead>
		       <tbody>

		           <tr>
			             <td>Pt</td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
		           </tr>
		           <tr>
			             <td>Phi</td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
		           </tr>
		           <tr>
		               <td>Eta</td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
			             <td><input type="checkbox"></td>
		           </tr>
		       </tbody>
	     </table>
              </template>

#2

Errm, so what’s your question?


#3

What I want to do with the table is assign values to parameters. So, I would like to know how to make the event to make an array which will include the mapped items from the table, mapping will be done when a checkbox is ticked. Say, bind Pt to Frequency for example and so on.


#4

Usually you would just attach an event to the inputs

Template.ipsosboard.onCreated(function(){
 this.resultArray = new ReactiveVar();
});
Template.ipsosboard.events({
 'change input[type=checkbox]':(event, template){
  // evaluate event.currentTarget and add to template.re
 }
});

but since your checkboxes have no name, id or value assigned it will be pretty difficult to create any meaningful “array”


#5

I know, this is what I indented to do initially, but then the requirements of the set up made me think so now I need to solve some other issue first, this is how to populate the table’s headings and list automatically. I probably need to make a new thread avoiding to pollute this one, which I will return back once I am done with the table. Interesting that you using ReactiveVar as opposed to Session haven’t used it before, I need to dig in and see how it works and what is used for.