Monday, July 1, 2013

Javascript validation for asp.net radiobuttonlist

 RadiobuttonList:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" >
    <asp:ListItem Text = "One" Value = "1"></asp:ListItem>
    <asp:ListItem Text = "Two" Value = "2"></asp:ListItem>
    <asp:ListItem Text = "Three" Value = "3"></asp:ListItem>
</asp:RadioButtonList>


JavaScript function:
<script type = "text/javascript">
function Validate()
{
   var RB1 = document.getElementById("<%=RadioButtonList1.ClientID%>");
   var radio = RB1.getElementsByTagName("input");
   var isChecked=false;
   for (var i=0;i<radio.length;i++)
   {
       if (radio[i].checked)
       {
           isChecked=true;
           break;
       }
   }
   if(!isChecked)
   {
        alert("Please select an item");
   }
   return isChecked;
}
</script>    





Getting SelectedText and SelectedValue
HTML Code
<asp:RadioButtonList ID="rblHobbies" runat="server" RepeatDirection="Horizontal"
        RepeatColumns="4">
        <asp:ListItem Text="Collecting" Value=""></asp:ListItem>
        <asp:ListItem Text="Dancing" Value=""></asp:ListItem>
        <asp:ListItem Text="Games" Value=""></asp:ListItem>
        <asp:ListItem Text="Gardening" Value=""></asp:ListItem>
        <asp:ListItem Text="Reading" Value=""></asp:ListItem>
        <asp:ListItem Text="Sports" Value=""></asp:ListItem>
        <asp:ListItem Text="Technology" Value=""></asp:ListItem>
        <asp:ListItem Text="Writing" Value=""></asp:ListItem>
    </asp:RadioButtonList>


    <br />
    <asp:Button Text="Submit" ID="btnHobbies" runat="server" OnClientClick="return ValidateRBL()" />

     <br />
    <span id="spn"></span>

Javascript function
function ValidateRBL() {

  var rbl = document.getElementById("<%=rblHobbies.ClientID %>");
  var input = rbl.getElementsByTagName("input");
  var text = rbl.getElementsByTagName("label");

  var message = "";

    for (var i = 0; i < input.length; i++) {
      if (input[i].checked) {
        message = text[i].innerHTML;
        document.getElementById("spn").innerHTML = "Your Hobby is: " + message;
        return false;
        }
    }

 if (message == "") {
   alert("Please select your hobby!");
   }
    return false;
}   
Note: To get the value, we can use: message = input[i].value;

Javascript function: We can also use nextSibling property:
function ValidateRBL() {

    var rbl = document.getElementById("<%=rblHobbies.ClientID %>");
    var input = rbl.getElementsByTagName("input");

     var message = "";

     for (var i = 0; i < input.length; i++) {

        if (input[i].checked) {
          message = input[i].nextSibling.innerHTML;
          document.getElementById("spn").innerHTML = "Your Hobby is: " + message;
          return false;
         }

     }

      if (message == "") {
        alert("Please select your hobby!");
       }

            return false;

  }  



Rendering of RadioButtonList
<table id="MainContent_rblHobbies">
        <tbody>
            <tr>

                <td>
                    <input id="MainContent_rblHobbies_0" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_0">Collecting</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_1" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_1">Dancing</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_2" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_2">Games</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_3" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_3">Gardening</label>
                </td>
            </tr>



            <tr>

                <td>
                    <input id="MainContent_rblHobbies_4" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_4">Reading</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_5" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_5">Sports</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_6" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_6">Technology</label>
                </td>


                <td>
                    <input id="MainContent_rblHobbies_7" type="radio" name="ctl00$MainContent$rblHobbies"
                        value=""><label for="MainContent_rblHobbies_7">Writing</label>
                </td>
            </tr>


        </tbody>
    </table>


Note: By default, asp.net will render the radiobuttonlist in the form of table.
You can change the render mode of radiobuttonlist by ‘Repeat Layout’ property.
It has 4 options:

1.       Table
2.       Flow
3.       OrderedList
4.       UnorderedList

Flow Rendering of radiobuttonlist
<span id="MainContent_rblHobbies">

<input id="MainContent_rblHobbies_0" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_0">Collecting</label>


<input id="MainContent_rblHobbies_1" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_1">Dancing</label>

<input id="MainContent_rblHobbies_2" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_2">Games</label>

<input id="MainContent_rblHobbies_3" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_3">Gardening</label><br>


<input id="MainContent_rblHobbies_4" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_4">Reading</label>


<input id="MainContent_rblHobbies_5" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_5">Sports</label>

<input id="MainContent_rblHobbies_6" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_6">Technology</label>

<input id="MainContent_rblHobbies_7" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_7">Writing</label><br>

</span>  

Note: The UnorderedList and OrderedList layouts only support vertical layout.  The UnorderedList and OrderedList layouts do not support multi-column layouts.


Orderlist Rendering of radiobuttonlist
<ol id="MainContent_rblHobbies">

        <li>
            <input id="MainContent_rblHobbies_0" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_0">Collecting</label></li>


        <li>
            <input id="MainContent_rblHobbies_1" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_1">Dancing</label></li>


        <li>
            <input id="MainContent_rblHobbies_2" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_2">Games</label></li>


        <li>
            <input id="MainContent_rblHobbies_3" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_3">Gardening</label></li>


        <li>
            <input id="MainContent_rblHobbies_4" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_4">Reading</label></li>


        <li>
            <input id="MainContent_rblHobbies_5" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_5">Sports</label></li>


        <li>
            <input id="MainContent_rblHobbies_6" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_6">Technology</label></li>


        <li>
            <input id="MainContent_rblHobbies_7" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_7">Writing</label></li>

 </ol>

UnOrderlist Rendering of radiobuttonlist
<ul id="MainContent_rblHobbies">

        <li>
            <input id="MainContent_rblHobbies_0" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_0">Collecting</label></li>


        <li>
            <input id="MainContent_rblHobbies_1" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_1">Dancing</label></li>


        <li>
            <input id="MainContent_rblHobbies_2" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_2">Games</label></li>


        <li>
            <input id="MainContent_rblHobbies_3" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_3">Gardening</label></li>


        <li>
            <input id="MainContent_rblHobbies_4" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_4">Reading</label></li>


        <li>
            <input id="MainContent_rblHobbies_5" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_5">Sports</label></li>


        <li>
            <input id="MainContent_rblHobbies_6" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_6">Technology</label></li>


        <li>
            <input id="MainContent_rblHobbies_7" type="radio" name="ctl00$MainContent$rblHobbies" value="">
<label for="MainContent_rblHobbies_7">Writing</label></li>

 </ul>