したいこと
フォームのボタンを押して、一度モーダルで確認画面を出し、そこで送信ボタンを押すと初めてフォームが送信されるようにしたい。
問題
フォームのボタンを押した後モーダルが出ても、一瞬でモーダルが消えてフォームが送信されてしまう。
<form action="/form" method="POST"> @csrf <div class="form-group"> <label for="title" class="col-form-label">title</label> <input type="text" class="form-control" id="title" name="title" placeholder="title"/> </div> <div class="form-group"> <label for="body" class="col-form-label">body</label> <input type="text" class="form-control" id="body" name="body" placeholder="body"/> </div> <div class="form-group row justify-content-center"> <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">送信</button> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>本文</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="submit" class="btn btn-primary">送信</button> </div> </div> </div> </div> </form>
原因
button
タグにtype
属性を指定していない。
<div class="form-group row justify-content-center"> // ↓ここ <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">送信</button> </div>
解決
button
タグはtype
属性の初期値がsubmit
になっているため、モーダルを出すボタンにtype
属性を明示的に設定しないとsubmit
されてしまいます。
<form action="/form" method="POST"> @csrf <div class="form-group"> <label for="title" class="col-form-label">title</label> <input type="text" class="form-control" id="title" name="title" placeholder="title"/> </div> <div class="form-group"> <label for="body" class="col-form-label">body</label> <input type="text" class="form-control" id="body" name="body" placeholder="body"/> </div> <div class="form-group row justify-content-center"> // ↓ type属性に「button」を指定 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">送信</button> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>本文</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="submit" class="btn btn-primary">送信</button> </div> </div> </div> </div> </form>