3)フォームデータ送信時にテキストフィールドにテキストが未入力の場合は、アラートを表示させる。
フォームからサブミットボタンをクリックしてデータを送信するときには、「submit」イベントが発生します。
このイベントが発生したときにテキストフィールドに入力があるかないかをチェックして、未入力のテキスト
フィールドがあれば、アラートを表示させてデータを送信しないように制御する方法は以下のようにします。
<考え方>
①「submit」イベントは、「<form>」エレメントに対して発生します。したがって、「<form>」エレメントの
オブジェクトを取得する必要があります。
②送信動作は、イベントリスナー関数を呼び出した親に「false」を戻すことで停止できます。
しかし、IE以外のブラウザでイベントリスナーを使っている場合は、この方法で送信動作を中止
することはできません。
IE以外のブラウザでは、「イベントオブジェクト. preventDefault() 」メソッドを実行して、親の動き
(ひとつ前のイベント)を停止すことができます。
<ファイル名:ja11-3-1.html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3)テキストフィールドにテキストが未入力の場合は、アラートを表示させる。</title> <script type="text/javascript" src="js11-3-1.js"></script> </head> <body> テキストフィールドにテキストが未入力の場合は、アラートを表示させる。 <br /> <form id="formId" name="formName" method="POST" action="abc.php"> 氏名:<input type="text" name="tfName1" id="tfId1" /><br /> 住所:<input type="text" name="tfName2" id="tfId2" /><br /> E-Mail:<input type="text" name="tfName3" id="tfId3" /><br /> <input type="submit" value="送信" id="btId1" /> </form> </body> </html><ファイル名:js11-3-1.js>
setEventListener(window,"load",window_onLoad); function setEventListener(obj,event,func){ if(navigator.appName.indexOf("Microsoft")>-1){ obj.attachEvent("on"+event,func); } else{ obj.addEventListener(event,func,false); } } function window_onLoad(){ var jsFormId=document.getElementById("formId"); //フォームエレメントのオブジェクトを取得しています。 setEventListener(jsFormId,"submit",textCheck); //取得したフォームオブジェクトの「submit」イベントリスナーを登録しています。 } function textCheck(e){ checkList=["tfId1","tfId2","tfId3"]; //テキストフィールドの「id」属性名を配列に格納しています。 for(var i=0;i<checkList.length;i++){ if(document.getElementById(checkList[i]).value==""){ //テキストフィールドが未入力かをチェックしています。 alert("未入力の項目があります。"); if(e.preventDefault){ //「preventDefault()」メソッドがあるかをチェックしています・ e.preventDefault(); //IE以外のブラウザの場合、ひとつ前のイベントを取り消しをしています。 } return false; //IEの場合のは、「return false」でイベントが取り消されます。 } } return true; //この行は、なくてもかまいませんが、IEの場合、イベント続行の意味がありますので書いておきます。 }