Laravel 5.5 Bootstrapのモーダル画面で投稿内容を編集

前提・実現したいこと

LaravelでtwitterのようなSNSサイトを作っています。
投稿一覧画面は自分の投稿のみ編集と削除ボタンが表示され
編集ボタン押下時にモーダルが出現し
モーダル画面のinputタグには選択した投稿内容が初期表示され
投稿を編集後、変更ボタンを押下すると内容がアップデートされ
投稿一覧画面の自分の投稿も、変更が反映されている
といった機能を実現したいです。

ソースコード

php
1top.blade.php
2
3@foreach ($post as $post)
4
5  <table class="table table-hover">
6
7    <tr>
8      <td> <a href="{{$post->user_id}}/profile"><img class="image-circle" src="{{ asset('images/' . $post->images ) }}" alt="ユーザーアイコン"></a> </td>
9      <td>{{ $post->username }}</td>
10      <td>{{ $post->post }}</td>
11      <td>{{ $post->created_at }}</td>
12      @if(Auth::id()==$post->user_id)
13      <td>
14        <button type="button" class="btn" data-toggle="modal" data-target="#Modal" data-whatever="{{ $post->post }}" data-post-id="{{$post->id}}">
15          <img src="{{ asset('images/edit.png') }}" alt="編集" >
16        </button>
17      </td>
18      <td>
19        <a class="" href="/post/{{$post->id}}/delete" onclick="return confirm('こちらの呟きを削除します。よろしいでしょうか？')">
20         <img src="images/trash.png" alt="削除"　width="25px" height="auto">
21        </a>
22      </td>
23
24      @endif
25    </tr>
26
27
28  </table>
29  @endforeach
30
31
32
33  <!-- ツイート編集用モーダル -->
34<div class="modal fade" id="Modal">
35  <div class="modal-dialog">
36    <div class="modal-content">
37      <div class="modal-header">
38        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
39        <h4 class="modal-title">編集</h4>
40      </div>
41
42      <form action="{{ route('updatePost', ['id' => $post->id ]) }}" method="post">
43        <div class="modal-body">
44            <input type="hidden" name="_method" value="PUT">
45          <input id="id" class="form-control" type="hidden" name="id" value="">
46          <input id="post" class="form-control" type="text" name="upPost" value="">
47        </div>
48
49        <div class="modal-footer">
50          <button type="button" class="btn" data-dismiss="modal">
51            <img src="{{ asset('images/edit.png') }}" alt="編集" width="25px">
52          </button>
53        </div>
54        {{ csrf_field() }}
55      </form>
56    </div>
57  </div>
58</div>

js
1app.js
2
3$(function(){
4  $('#Modal').on('show.bs.modal', function(event){
5    var button = $(event.relatedTarget);
6    var post = button.data('whatever');
7    var id = button.data('post-id');
8
9    var modal = $(this);
10    modal.find('.modal-body input#post').val(post);
11    modal.find('.modal-body input#id').val(id);
12  });
13});

php
1PostsController.php
2
3//ツイート編集処理
4    public function update(Request $request)
5    {
6      $id = $request->input('id');
7      $up_post = $request->input('upPost');
8      Post::query()
9      ->where('id', $id)
10      ->update(
11        ['post' => $up_post]
12      );
13
14      return redirect('/top');
15    }

php
1web.php
2
3Route::put('/top', 'PostsController@update')->name('updatePost');
4

参考サイト１
 参考サイト２

こちらモーダル上の入力欄で編集後
キーボードのEnterをおすと更新できましたが
フォーム内のbuttonを押下すると更新できません。
buttonタグのtypeをsubmitにすると
キーボードのEnterを押してもbuttonをクリックしても更新できなくなります。
キーボードEnterでもbutton押下でも更新できるようにするには
どこを改善すればよろしいでしょうか。
ご教授お願いいたします。