4)ラジオボタンにチェックが入っていたらサブミットボタンを有効にする。
フォームデータの送信をユーザの同意を得てから送信できるようにします。
<考え方>
①フォームエレメントを利用できないようにするためには、フォームエレメントのオブジェクトを操作します。
それには、「disabled」プロパティを操作します。
フォームエレメントのオブジェクト.disabled=true; ← フォームエレメント利用不可
フォームエレメントのオブジェクト.disabled=false; ← フォームエレメント利用可(デフォルト)
②IEは、「target」オブジェクトが存在しないので代わりに「srcElement」オブジェクトが使えるようにしています。
<ファイル名:ja11-4-1.html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ファイル名:js11-4-1.js>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4)ラジオボタンにチェックが入っていたらサブミットボタンを有効にする。</title>
<script type="text/javascript" src="js11-4-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="radio" name="rbName" id="rbId1" />同意しません
<input type="radio" name="rbName" id="rbId2" />同意します<br />
<input type="submit" value="送信" id="btId1" />
</form>
</body>
</html>
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 jsBtId1=document.getElementById("btId1"); jsBtId1.disabled=true; //サブミットボタンを使えないように初期化しています。 var jsFormId=document.getElementById("formId"); setEventListener(jsFormId,"submit",textCheck); var jsRbId1=document.getElementById("rbId1"); setEventListener(jsRbId1,"click",radioCheck); var jsRbId2=document.getElementById("rbId2"); setEventListener(jsRbId2,"click",radioCheck); } function textCheck(e){ checkList=["tfId1","tfId2","tfId3"]; for(var i=0;i<checkList.length;i++){ if(document.getElementById(checkList[i]).value==""){ alert("未入力の項目があります。"); if(e.preventDefault){ e.preventDefault(); } return false; } } return true; } function radioCheck(e){ var jsBtId1=document.getElementById("btId1"); if(e.target){ //イベントオブジェクトにtargetオブジェクトが存在するかを調べています。 if(e.target.id=="rbId1"){ //「同意しない」ラジオボタンがチェックされている場合は、サブミットボタンを使えないようにしています。 jsBtId1.disabled=true; } if(e.target.id=="rbId2"){ //「同意します」ラジオボタンがチェックされている場合は、サブミットボタンを使えるようにしています。 jsBtId1.disabled=false; } } else{ //イベントオブジェクトにtargetオブジェクトが存在しない場合の処理 if(e.srcElement.id=="rbId1"){ jsBtId1.disabled=true; } if(e.srcElement.id=="rbId2"){ jsBtId1.disabled=false; } } }