2017-04-26 13 views
0

私は流星の形をしています。私がそれを提出すると、私は別のテンプレートにルーティングしたいです。しかし、それはどのように動作しません。フォームを送信する必要はありません(流星)

形の経路がある:ローカルホスト:フォーム3000/DATEFORM

入力は、日付、誕生日の月および年(無関係)です。しかし、フォームを提出すると(フォームを提出し、Router.go( "/ display")をプレゼントしている)、アドレスバーに "http://localhost:3000/dateform?day=25&month=9&year=1996"と表示されます(25,9、同じフォームページ。

提出イベントで別のテンプレートへのアプリルートを作成するにはどうすればよいですか? main.htmlとで

HTMLコード:イベントハンドラに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で

<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> 

コード()もdoesntの仕事。

このコードで何が問題になっていますか?

答えて

0

非常に高い確率で、あなたは、単に実際に提出されてからフォームを防ぐ必要があります。

event.preventDefault(); 

ユーザーがイベントリスナーを呼び出す以外にも、あなたのsubmitボタンを押すと、ブラウザは、デフォルトのアクションがあるフォームを送信します現在のページをリロードします。

これはおそらくあなたのconsole.logが動作していない理由を説明しています。ページがリロードされるとコンソールがクリアされます。

+0

あまりにも多くのghybsありがとうございます。これは、アプリケーションが異常に動作していた唯一の欠点でした。 –

+0

yw、ご意見ありがとうございます。良い仕事を続けてください! – ghybs

関連する問題