jQueryでエンターを押した後にdiv要素が表示されません。

前提・実現したいこと

フォームに入力してそのままエンターを押した後に、
画面にdivで作ったcssアニメーションを表示される様にしたいです。
（エンターを押すとpythonで処理が始まりますが、少し時間がかかるためローディング中のアニメーションを表示させたい）
（スマホ、windows,mac）
cssアニメーションは省略していますが、display:none;で姿を消しています。
また、jsは外部フォルダを読み込んでおります。

該当のソースコード

html
1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5<meta charset="utf-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1">
7  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9  <script src="{{url_for('static', filename='index.js')}}"></script>
10  <title>商品を入力して下さい</title>
11</head>
12<body>
13
14  <form method="get" action="/output">
15  　　<input type="text" name="name" style="width:350px;" class='sample' placeholder="商品を入力して下さい">
16  </form>
17  <div class="loader">
18      <div class="dot"></div>
19      <div class="dot"></div>
20      <div class="dot"></div>
21  </div>
22</body>
23</html>

css
1.loader{
2display:none;
3}
4省略してます。

試したこと

jquery
1$(function() {
2  $( 'input' ).keypress( function ( e ) {
3	if ( e.which == 13 ) {
4		$('loder').fadeIn();
5	}
6});
7  
8});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
paizacloudでpythonフレームワークflaskを使っております。
構成は下記の様になっております。

│ myapp.py
├─ static
│ └─css
│ │ └─ style.css
│ └─index.js
│
└─ templates
└─ index.html

数十時間調べても解決しませんでした。

x_x

2019/06/19 04:34

HTML 上に loder はないようですが、正しく書き写しているでしょうか？

nre

2019/06/19 04:45

大変失礼致しました。 css部分を訂正いたします。

miyabi_pudding

2019/06/19 06:43

ソースコードが、うまくコードブロックに入ってないようですよ。編集時に、右側にプレビューが出ますので、それを見ながら直しましょう。

nre

2019/06/19 08:48

ご指摘ありがとうございます。ソースコードを貼り付ける場所が間違えているという事に気付けました。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

submit処理を入れればよいのでは？

javascript
1<style>
2#loader{width:100%;height:100%;background-Color:red;}
3</style>
4<script>
5$(function(){
6  $('#loader').hide();
7  $('form').on('submit',function(){
8    $('#loader').fadeIn();
9  });
10});
11</script>
12<div id="loader">loading...</div>
13<form action="/output">
14<input type="text" name="hoge" value="fuga">
15<input type="submit" value="send">
16</form>