フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力した値を調べる必要がある場合があります。
その時に、まずはsubmitボタンのイベントをキャンセルしないといけないのでその方法をメモしておきます。
目次
■DomLevel2でのキャンセル～addEventListenerの場合
DomLevel2の場合はイベントの設定をaddEventListenerを使用しますがその場合のキャンセル方法
ちなみにaddEventListenerはIE対応ではないので動作しません。
//myformというidを設定したフォームにsubmitイベントを設定
document.getElementById("myform").addEventListener("submit",checkform,false);
function checkform(event){
～省略～
// eventプロパティのpreventDefault()を実行することでsubmitのデフォルトをキャンセル
event.preventDefault();
}
上記の例だとcheckform関数の引数にeventが設定されていますのでeventプロパティのpreventDefault()を呼び出すことでキャンセルができる
// eventプロパティのpreventDefault()を実行することでsubmitのデフォルトをキャンセル
event.preventDefault();
}
■DomLevel2でのキャンセル～attachEventの場合
IEの場合は「addEventListener」に対応していないので「attachEvent」を使用する。
//myformというidを設定したフォームにsubmitイベントを設定
document.getElementById("myform").attachEvent("onsubmit",checkform);
function checkform(event){
～省略～
// eventプロパティのreturnValue()を実行することでsubmitのデフォルトをキャンセル
event.returnValue=false;
}
IEの場合だと「preventDefault」にも対応していないので「returnValue」プロパティを「false」にする必要がある
// eventプロパティのreturnValue()を実行することでsubmitのデフォルトをキャンセル
event.returnValue=false;
}
■DomLevel0の場合～part1～
DomLevel0で直接html要素に「onsubmit」を記述する場合のキャンセル方法
関数の最後に「return false;」を設定する
//checkform
function checkform(){
～省略～
//関数の最後にfalseを返す
return false;
}
上記の関数をhtmlのフォームに「onsubmit」イベントを設定してchekform関数そのものを「return」することでchekformでの「false」を戻り値として受け取ることになるデフォルトのsubmitイベントがキャンセルされてフォームの送信がされなくなる
//onsubmitイベントでchekformを実行する前にreturn を指定する
■DomLevel0の場合～part2～
DomLevel0でのデフォルトのイベントをキャンセルする場合のほかの方法
上記のpart1と違って関数自体に「return false」を設定する必要はない
//checkform
function checkform(){
～省略～
}
part2の場合はhtmlのフォームの「onsubmit」イベントでcheckform();を実行後に「return false;」を記述することでデフォルトのイベントをキャンセルすることができる
//onsubmitイベントでchekformを実行する前にreturn を指定する
