表单提交事件不能正常工作（流星）

Question

我在 meteor 中有一个表单，当我提交它时，我想路由到另一个模板。但它有些不起作用。

表格路径为：localhost:3000/dateForm

在表格中输入生日的日期、月份和年份（无关紧要）。但是当它提交表单时（提交表单事件到位并且 Router.go("/display") 存在）它只在地址栏中显示“http://localhost:3000/dateform?day=25&month=9&year=1996”（25、9、1996 是输入在表单中）并且只显示相同的表单页面。

如何让应用程序在提交事件时路由到不同的模板？

html中的代码main.html：

<template name="dateFormPage">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.css" type="text/css">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-1">Enter Your Birthday</h1>
        </div>
      </div>
    </div>
  </div>
  <form>
    <input type="text" placeholder="Day" name="day">
    <input type="text" placeholder="Month(number)" name="month">
    <input type="text" placeholder="Year" name="year">
    <input type="submit" class="btn btn-success">
  </form>
</template>

<template name="display">
  abcderfght
</template>

代码在main.js

Template.dateFormPage.events({
  'submit form': function(event){
    var day=event.target.day.value.parseInt();
    var month=event.target.month.value.parseInt()-1;
    var year=event.target.year.value.parseInt();
    var today=new Date();
    var toDate=today.getDate();
    var toMonth=today.getMonth();
    var toYear=today.getFullYear();

    function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
    }

    var month_diff_raw=monthDiff(new Date(day, month, year), new Date(toDate, toMonth, toYear));

    Session.set("year_diff", month_diff_raw/12);

  },
});

console.log() 在事件处理程序中也不起作用。

这段代码出了什么问题？

Answer 1

很有可能你应该简单地阻止表单被实际提交：

event.preventDefault();

当用户按下您的 submit 按钮时，除了调用您的事件侦听器外，浏览器还会提交表单，默认操作是重新加载当前页面。

这可能解释了为什么您的 console.log 似乎不起作用：重新加载页面时控制台被清除。

表单提交事件不能正常工作（流星）

Form submit event does'nt work as it should(Meteor)

meteor

iron-router