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
フォームにアクセスする

いまさらながらフォームにアクセスする方法をメモ ざっくりとメモ。 ■配列でフォー …

【JavaScript】ユーザーエージェントを判別して処理を分岐する

今回、PC用のサイトを作成していたんですがiphoneとipadでも見栄えを変え …

【JavaScript】関連するデータをひとつで管理し、さらにそのデータを複数配列で管理する

タイトル通りで、xmlデータから抽出した画像に関するデータ(サムネイル画像のパス …

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

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

no image
要素を追加する 

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

JavaScriptで動画コンテンツを操作してみた!

前回、html5のvideoタグについて説明しました。 html5のvideoで …

HTML5のWeb Workersで並列処理を使いこなしてみよう!

近年は、html5の台頭によって「html5+css+javascript」によ …

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

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

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

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

html5のlocalStorageで複数のデータを保存するには?

以前、localStorageのデータを保存する方法について記事を書きましたが、 …