How to Determine What TextBox Will Do Based on RadioButtonList Selection - Using JavaScript

Question

I have a RadioButtonList and based on what is selected I need a TextBox to do something different. If the first ListItem is selected, I need the TextBox to allow only 4 numeric values to be entered. If the second ListItem is selected, I need the TextBox to function as usual. I have functions for numeric and length validation that I know work but cannot seem to figure out how to implement those based on which is selected. I included the numeric and length functions with the code below. The main issue I have is determining which is selected and based on that selection, how the TextBox should work.

// 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>

Any help would be greatly appreciated and thank you in advance!

Answer 1

The onclick event that you have referenced in the RBL's HTML markup is actually the server-side operation.

In order to fire the onclick event on the client side, you need to add the onclick event to the RBL's attributes in codebehind:

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

Update

I have never used the document.getElementsByName approach to get the RBL data, so I can't tell you whether or not this is causing the problem, but I can tell you what works for us. We use the following code to successfully extract the currently selected value from the RBL, where the parameter is the ClientID of the 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;
}

I would suggest trying this method to get your currently selected value.

Answer 2

Javascript has functional trait to it.You could play with functions very easy.

// 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();
}