2010年3月4日木曜日

ラジオボタンの値の取得

WEBシステムの作成でフォームの中にラジオボタンを配置する時、phpにしろ何にせよその値の取得が非常にめんどくさいと思ったことはないですか?
ラジオボタンは他のコントロールと違い複数のコントロールでセットになっているため、
その値を取得するのにその数分のラジオボタンをチェックしてどれが選択されているかを判断しないといけない。こりゃめんどくさい。

そこで、考えました。

ページのフォームにラジオボタンがあれば、同じnameのものをグループ化して、
GPR_nameという名前でhiddenを作成し、
ラジオボタンの選択値をそのhiddenに設定するものです。
設置はスクリプトを読み込むだけ。

サンプル
スクリプト


  1. //ラジオボタンが存在すれば"radiogroup_"+nameのグループを作成する  
  2. //なるべくページの下のほうで読み込みしてください  
  3. var radioButtonGroup = new Array();  
  4. radio_setup();  
  5.   
  6. /* 
  7. if(typeof window.addEventListener == 'function'){ // addEventListenerが使えるなら 
  8.  window.addEventListener('load', radio_setup, false); 
  9. } else if(typeof window.attachEvent == 'object'){ // attachEventが使えるなら(IE用) 
  10.  window.attachEvent('onload', radio_setup); 
  11. } 
  12. */  
  13. var GP_NAAME_PREFIX="GPR_";  
  14. //radioのクリックイベントを追加する。  
  15. function radio_setup(){  
  16.  var inputs = document.getElementsByTagName("input");  
  17.  if(inputs.length>0){  
  18.   for(i=0;i<inputs.length;i++){  
  19.    if(inputs[i].type=="radio"){  
  20.     if(arrayIndexOf(radioButtonGroup,inputs[i].name)<0){  
  21.      radioButtonGroup.push(inputs[i].name);  
  22.     }  
  23.       
  24.     if(inputs[i].addEventListener){  
  25.         inputs[i].addEventListener("click",function(){radioclick(this);}, false);  
  26.     }else if(inputs[i].attachEvent){  
  27.         inputs[i].attachEvent("onclick"function(){radioclick(event.srcElement);});  
  28.     }  
  29.   
  30.    }  
  31.   }  
  32.  }  
  33. }  
  34.   
  35.   
  36.   
  37. //GroupHiddenを作成する  
  38. //hiddenが準備してあればその値を選択反映する。  
  39. //準備されていなければ、作成する。  
  40.   
  41. for(j=0;j<radioButtonGroup.length;j++){  
  42.  //フォームは1つ限定  
  43.  var fm = document.forms[0];  
  44.  input=document.createElement("hidden");  
  45.  input.id=GP_NAAME_PREFIX+radioButtonGroup[j];  
  46.  //hiddenが準備されて値が設定されているとき(値の復元時など)  
  47.  var grouphidden=document.getElementById(input.id);  
  48.  if(grouphidden){  
  49.   radios=fm.elements[ASPnameKusofix+radioButtonGroup[j]];  
  50.   for(k=0;k<radios.length;k++){  
  51.    if(radios[k].value==grouphidden.value){  
  52.     radios[k].checked=true;  
  53.    }else{  
  54.     radios[k].checked=false;  
  55.    }  
  56.   }  
  57.  }else{  
  58.   fm.appendChild(input);  
  59.   //初期値の設定  
  60.   var rds = fm.elements[radioButtonGroup[j]];  
  61.   for(j=0;j<rds.length;j++){  
  62.    if(rds[j].checked==true){  
  63.     input.value=rds[j].value;  
  64.       
  65.    }  
  66.   }  
  67.  }  
  68. }  
  69. //クリックイベント(grouphiddenに値を設定する)  
  70. function radioclick(radioobj){  
  71.  var gobj=document.getElementById(GP_NAAME_PREFIX+radioobj.name);  
  72.  gobj.value=radioobj.value;  
  73.  //alert(gobj.value);  
  74. }  
  75. //サブ関数 配列の検索  
  76. function arrayIndexOf(ary,value){  
  77.  var res=-1;  
  78.             for(h=0;h<ary.length;h++){  
  79.     
  80.                 if( ary[h] == value){  
  81.                    res=h;  
  82.                 }  
  83.             }  
  84.             return res;  
  85. }