【JavaScript】キャンセルボタンで確認ダイアログを表示する-普通の場合/submitの場合

フォームの入力で削除ボタンを設置するとき,確認ダイアログを表示して削除をキャンセルできるようにします。通常の場合とsubmitの場合で書き方が異なります。個人的な備忘録として。

通常の場合

<button id="deleteButton" type="button">削除</button>

<script>
    const elem = document.querySelector('#deleteButton');
    elem.addEventListener('click', () => {
         if(!confirm('削除してもよろしいですか?')) return false;
    })
</script>

通常の button はこれでオッケーです。イベントリスナをで click を設置して confirm で確認ダイアログを表示します。キャンセルをクリックすると !confirm()true を返すので,return false とすることでボタンの処理をキャンセルします。

submit の場合

<form action="・・・・・・" method="POST">
    <input id="itemDelete" type="submit" value="削除">
</form>

<script>
    const elem = document.querySelector('#itemDelete');
    elem.addEventListener('click', (event) => {
        if(!confirm("削除してもよろしいですか?")) return event.preventDefault();
    });
</script>

type="submit" の場合は書き方を変える必要があります。return false の代わりに return event.preventDefault() を用います。

流れとしては引数に event を渡して preventDefault() でブラウザのデフォルトの動作(ここでは form action の実行)を妨げます。単に return false では action を止めることはできないので preventDefault() を用いる必要があります。