Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

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

      2015/07/18

フォームの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

 - javascript

     

Message

  関連記事

no image
要素を追加する 

最近やたらとjQueryに頼って生きてます。jQueryだと要素の追加が簡単だが …

【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには??

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろ …

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …

html5のwebStorage(localStorage)でデータを保存する

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加さ …

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

javascriptのプロトタイプを調べる

前回、javascriptのクラスについて軽く書いたが今回は、prototype …

【JavaScript】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。 ifra …

IE6・7・8でもHTML5のvideoを利用できる方法とは!?

さて、html5のvideoタグを利用して動画を再生させるのは簡単なんですが、た …