📝

初心者コーダーがformタグの確認ダイアログ作成で気づいたこと

2023/01/30に公開

確認ダイアログの作成

form練習がてらにPOST通信でのデータの受け渡しをしていた時に発見
formでsubmitするときに確認ダイアログを出すJsを書いたのだが

この挙動でするとダイアログでキャンセルを押しても画面遷移してしまう。
これだとキャンセルという選択肢の意味がなくなってしまうので
試行錯誤していると1つ気づいた


「clickじゃなくてsubmitにしたらいいんじゃね?」
我ながら初心者にありそうな間違いに気づくとは中々...
思い立ったが吉日!すぐコードを書き換えた

またもや失敗
この空のあいさつを毎回見てると自分が何者かわからなくなってくる
そこで今まであまりしてこなかった
HTMLのform要素のonsubmit属性に関数を入れてみた。

ページ遷移しない!!!

まとめ

多分自分が思うに
addEventlistenerですると
キャンセルの関数checkが読み込まれる前に
先にhtmlのsubmitが実行されてしまうのだと思った
だから直接htmlのonsubmit属性に書くことで先にキャンセル処理が走ってページ遷移しなくなる

という自分なりの解釈が出てきました。

Discussion