【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは!?

javascript

フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力した値を調べる必要がある場合があります。
その時に、まずはsubmitボタンのイベントをキャンセルしないといけないのでその方法をメモしておきます。

■DomLevel2でのキャンセル~addEventListenerの場合

DomLevel2の場合はイベントの設定をaddEventListenerを使用しますがその場合のキャンセル方法

ちなみにaddEventListenerはIE対応ではないので動作しません。

上記の例だとcheckform関数の引数にeventが設定されていますのでeventプロパティのpreventDefault()を呼び出すことでキャンセルができる

■DomLevel2でのキャンセル~attachEventの場合

IEの場合は「addEventListener」に対応していないので「attachEvent」を使用する。

IEの場合だと「preventDefault」にも対応していないので「returnValue」プロパティを「false」にする必要がある

■DomLevel0の場合~part1~

DomLevel0で直接html要素に「onsubmit」を記述する場合のキャンセル方法

関数の最後に「return false;」を設定する

上記の関数をhtmlのフォームに「onsubmit」イベントを設定してchekform関数そのものを「return」することでchekformでの「false」を戻り値として受け取ることになるデフォルトのsubmitイベントがキャンセルされてフォームの送信がされなくなる

■DomLevel0の場合~part2~

DomLevel0でのデフォルトのイベントをキャンセルする場合のほかの方法

上記のpart1と違って関数自体に「return false」を設定する必要はない

part2の場合はhtmlのフォームの「onsubmit」イベントでcheckform();を実行後に「return false;」を記述することでデフォルトのイベントをキャンセルすることができる

実験としてフォームに記入されたテキストとパスワードを記入してボタンをクリックした後に、div要素に記入されたテキストを表示させる(もしデフォルトのsubmitイベントが実行されてしまった場合は、リロードされて表示されなくなる)

実行結果(今回はdomlevel2のpart2で実験)

参考サイト:jmblog.jp