Adding form row dynamically on button click


#1

A Meteor beginner question. I started building a form without using the Autoform package (I tried it but had a hard time with styling and understanding the internals). One of my requirements is to add a new blank form row when a user clicks the ‘add row’ button. The way I am doing it is via a helper function tied to the click event on the button. In the helper I am creating a new div with the required inner HTML and then appending this div to the parent. Is this the right way to do it or is there a better ‘Meteor way’?

Thanks!


#2

Am doing the same thing myself and although autoform has push array https://github.com/aldeed/meteor-autoform#update-pusharray i made the decision to handle form input myself.

You can get the dynamically created form data using jquery serialize array and figure out how to name individual dynamic field.

Myself,i am using the m object property name and a common prefix like this

Template.Er.events({
	'submit #er': function(event){
      event.preventDefault();
      var names = event.target.names.value;
      var examname = event.target.examname.value;
      var classname = event.target.classname.value;
      // var result = event.target.results.value;
      var formData = $('#er').serializeArray();
       console.log(formData);
	  
    },

	  'click .reactive-table tr': function() {

        Session.set('erid', this._id); 
        var er = Session.get('erid');
         var cursor = Er.find({ _id: er}).fetch();
        cursor.forEach(function(doc){
        	var subjects = doc.ersubjects;
        	for (i = 0; i < subjects.length; i++) {
        		for (var prop in subjects[i]) {
        $( ".allsubjects" ).append( '<div class="col-md-3"><div class="form-group"><label>'+prop+'</label><input type="text" name="results_'+prop+'" value="'+subjects[i][prop]+'" class="form-control" placeholder="First row, second input"></div></div>');
    }      //result.push(arr);

        		
        		}
        });       
}
});