Meteor changing form value

Hello,

I’m trying to change the values of some input fields only once upon page being loaded. For example submit_date_year should be current year, so 2017 right now.

My HTML

<template name="trip_html">
    
    <table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
    <tr>
          <td><input class="form-control input-lg" name="submit_date_day" type="text" placeholder="Day"/>  </td>
           <td><input class="form-control input-lg" name="submit_date_month" type="text" placeholder="Month"/>  </td>
            <td><input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year"/>  </td>
        </tr>
        </table>
    </template>

My JS

On page load function


    Template.trip_html.rendered = function(event, template) {
    
         event.target.submit_date_year.value = 'test'; // DOES NOT WORK
          console.log('Template onLoad');
        
    };

However, I cannot use event.target.submit_date_year in that on load function, for some reason…
But it works in events, once I click ‘submit’ button

    Template.trip_html.events({
    "submit .add-trip": function(event){
    event.preventDefault();
    var day = event.target.submit_date_day.value;
    var month = event.target.submit_date_month.value;
    
    
    var year = event.target.submit_date_year.value;
    
    var car = event.target.submit_car.value;
    var b = event.target.submit_b.value;
    var a = event.target.submit_a.value;
    var dist = event.target.submit_dist.value;
    
    if(empty(day) || empty(month) || empty(year) || empty(car) || empty(b) || empty(a) || empty(dist)){
    return false;
    }
    
    if(!isNumeric(day) || !isNumeric(month) || !isNumeric(year) || !isNumeric(dist)){
    	return false;
    }
    
    if(day.startsWith("0"))
    day = day.replace("0", "");
    
    if(month.startsWith("0"))
    month = month.replace("0", "");
    
    if(year.startsWith("0"))
    year = year.replace("0", "");
    
    console.log(day, month, year, car, a, b, dist);
    Meteor.call('addTrip', day, month, year, car, a, b, dist);
    
    event.target.submit_a.value = event.target.submit_b.value;
    event.target.submit_b.value = '';
    event.target.submit_dist.value = '';
    
    
    },

Help please!

With Blaze (Meteor’s default templating engine) you shouldn’t access your template elements using event.target.submit_date_month.value and similar constructs. Instead, you should use Blaze helpers. See here for some examples on how this works: http://blazejs.org/#Examples

How do I use Blaze helpers for initial page load? Template.trip_html.rendered = function() works, but how do I do this with a helper?

What he’s trying to say is that you should use a helper as the value attribute of the form control.

<template name="trip_html">
   <input name="submit_date_year" value={{submit_date_year_helper}} />
</template>
1 Like