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

我做的是添加了一些反应性变量

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;

},

初始加载时的Meteor Change表单值

2 个答案: