Метеор Изменение значений формы при начальной нагрузке

Question

Мне было интересно, как я могу установить значения моих форм при начальной загрузке страницы? Я могу изменить значения на событие, например событие клика на определенном элементе (кнопка отправки), но как это сделать при загрузке страницы.

Мой 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> 



     <tr> 
     <td><input class="form-control input-lg" name="submit_car" type="text" placeholder="Car"/> </td> 
     <td><input class="form-control input-lg" name="submit_dist" type="text" placeholder="Distance"/> </td> 
     </tr> 

     <tr> 
     <td><input class="form-control input-lg" name="submit_a" type="text" placeholder="Location A"/> </td> 
      <td><input class="form-control input-lg" name="submit_b" type="text" placeholder="Location B"/> </td> 
     </tr> 
    </table> 

Javascript

Template.trip_html.events({ 
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 = ''; 


}}); 

Я хочу начальную загрузку страницы, чтобы иметь сегодня день, месяц и год и один раз человек хитами кнопку отправки, он остается неизменным (так что люди могут представить вчера и даже в прошлом году)

Answer 1

Вы пробовали установить значение по умолчанию в форме?

С метеор, используя пламя, это то, что я хотел бы сделать:

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" value={{getDay}} /> </td> 
<td><input class="form-control input-lg" name="submit_date_month" type="text" placeholder="Month" value={{getMonth}} /> </td> 
    <td><input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year" value={{getYear}} /> </td> 
</tr> 
</table> 
</template> 

JavaScript

var today = new Date(); 

Template.trip_html.helpers({ 
getDay() { 
    return today.getDate(); 
}, 
getMonth() { 
    return today.getMonth()+1; 
}, 
getYear() { 
    return today.getFullYear(); 
} 
}); 

См https://www.w3schools.com/tags/att_input_value.asp

Что касается второй части вашего вопрос, «один раз человек нажимает кнопку отправки, он остается таким же:« Я не точно, что вы подразумеваете под этим. Но если вы имеете в виду, что каждый пользователь имеет форму, то вы можете добавить логику к вспомогательным функциям, чтобы проверить, действительно ли этот пользователь уже отправил форму и вытащил значения из коллекции, а не установил ее на сегодняшнюю дату.

Я думаю, что ключи к тому, что вы хотите сделать, - это 1) использовать атрибут value в ваших входных элементах и ​​2) использовать вспомогательные функции для вашего шаблона.

Надеюсь, это даст вам некоторые идеи!

Answer 2

То, что я сделал, я добавил некоторые реактивные varibles

HTML

<tr> 
    <td><input class="form-control input-lg submit_day" name="submit_date_day" type="text" value={{submit_dayvalue}} placeholder="Day"/> </td> 
    <td><input class="form-control input-lg" name="submit_date_month" type="text" value={{submit_monthvalue}} placeholder="Month"/> </td> 
    <td><input class="form-control input-lg" name="submit_date_year" value={{submit_yearvalue}} type="text" placeholder="Year"/> </td> 
</tr> 

JS (КЛИЕНТ)

Template.trip_html.helpers({ 

submit_yearvalue: function(){ 
var currentTime = new Date(); 
var currentYear = currentTime.getFullYear(); 
return currentYear; 

}, 

filter_year: function(){ 
var currentTime = new Date(); 
var currentYear = currentTime.getFullYear(); 
return currentYear; 

}, 

submit_monthvalue: function(){ 
var currentTime = new Date(); 
var currentMonth = currentTime.getMonth(); 
return currentMonth+1; 

},