RadioButtonListの選択に基づいて行うTextBoxの決定方法 - JavaScriptを使用する

Question

私はRadioButtonListを持っていて、何が選択されているかに基づいて、何か別のことをするためにTextBoxが必要です。最初のListItemが選択されている場合は、4つの数値だけを入力できるようにTextBoxが必要です。 2番目のListItemが選択されている場合、TextBoxが通常どおり機能するようにする必要があります。数値と長さの検証のための関数を持っていますが、選択されているものに基づいてそれらを実装する方法を理解できないようです。私は以下のコードで数値と長さの関数を含めました。私が持っている主な問題は、選択されているものとその選択に基づいて、TextBoxがどのように動作するかを判断することです。

// Only allows numeric values 
function isNumeric(num){ 
    var charCode = (num.which) ? num.which : event.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } 
    else { return true; } 
} 

// Validates TextBox Length 
function validateTextBoxLength() { 
    var tb = document.getElementById("TextBox1").value; 
    if (tb.length > 1 && tb.length != 4) { 
     alert("TextBox must be 4 digits."); 
     return false; 
    } 
    return true; 
} 

// Check for RadioButtonList selection 
function rbSelectedValue() { 
    var radio = document.getElementsByName('<%= rblSearchType.ClientID %>'); 
    var tb = document.getElementById("TextBox1").value; 
    for (var i = 0; i < radio.length; i++) { 
     if (radio[i].checked) { 
      // alert("RadioButton 1 Selected"); 
      if (tb.length > 1 && tb.length != 4) { 
       alert("TextBox must be 4 digits."); 
       return false; 
      } 
      else { 
      return true; 
      } 
     } 
     else { 
     // alert("RadioButton 2 Selected"); 
     return true; 
    } 
} 

<asp:RadioButtonList ID="RadioButtonList" runat="server" AutoPostBack="true" RepeatDirection="Horizontal" onclick="rbSelectedValue()"> 
    <asp:ListItem Value="List Item 1" Selected="True">Test 1</asp:ListItem> 
    <asp:ListItem Value="List Item 2">Test 2</asp:ListItem> 
</asp:RadioButtonList> 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

ご協力いただけると幸いです。

Answer 1

RBLのHTMLマークアップで参照したonclickイベントは、実際にはサーバー側の操作です。

クライアント側でのonclickイベントを発生させるためには、あなたは分離コードでRBLの属性にonclickイベントを追加する必要があります。

RadioButtonList.Attributes.Add("onclick", "rbSelectedValue()"); 

更新

私は、ドキュメントを使用したことがありません.getElementsByNameアプローチを使用してRBLデータを取得するので、問題の原因となっているかどうかはわかりませんが、私たちにとって何がうまくいくかはわかります。私たちは、成功したパラメータは、RBLのクライアントIDであるRBLから現在選択されている値を抽出するために、次のコードを使用します。

function getRadioListSelectedValue(sName) { 
    var theList = document.getElementById(sName); 
    var returnVal = ''; //empty string, not null 

    if (theList) { 
     for (var i = 0; i < theList.childNodes.length; i++) { 
      if (theList.childNodes[i].name == sName) { 
       if (theList.childNodes[i].checked) { 
        returnVal = theList.childNodes[i].value; 
        break; 
       } 
      } 
     } 
    } 
    return returnVal; 
} 

私はあなたの現在選択されている値を取得するには、この方法を試してお勧めします。

Answer 2

Javascriptには機能的な特徴があります。非常に簡単に機能することができます。

// Check for RadioButtonList selection 
function rbSelectedValue() { 
    var radio = document.getElementsByName('<%= rblSearchType.ClientID %>'); 
    var validation; 
    for (var i = 0; i < radio.length; i++) { 
     if (radio[i].checked) { 
      switch(n) 
      { 
       case 1: 
       //do validation 
       validation = function(){ 
        validateTextBoxLength(); 
        isNumeric(document.getElementById("TextBox1").value); 

       } 
       break; 
       case 2: 
       //do nothing, if textbox 
       validation = function(){ 
       } 
       break; 
      } 
     } 
     validation(); 
}