validation of radiobuttonlist in asp.net using javascript

Question

i have to validate a radio button using javascript. it should show a message if none of the option is selected.

my radio button code is:

<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem></asp:ListItem>
    </asp:RadioButtonList>

and the submit button is:

<asp:Button ID="next2" runat="server" Text=">>" Width="46px" 
        OnClientClick="return next2()"/>

the corresponding javascript function is :

        function next2() {

        var listItemArray = document.getElementById('<%=welldata.ClientID %>');
        var isItemChecked = false;
        var length1 = listItemArray.length;

        for (var i=0; i<length1; i++)
          {
              var listItem = listItemArray[i];
              document.write(listItem);

             if ( listItem.checked )
                 {
               alert(listItem.value);
               isItemChecked = true;
                 }
           }

            if ( isItemChecked == false )
              {
              alert('Nothing is checked for welldata!');

              return false;
                 }

             return true;
    }

while debugging i noticed thaat function is executed but doesn't enter the for loop. also i tried

        document.write(isItemChecked);
        document.write(listItemArray);
        document.write(length1);

and the output was :

false [object HTMLTableElement] undefined

nekno · Accepted Answer · 2014-06-22 09:11:44Z

1

The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.

So, you need to get the input tags inside the table tag first:

var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');

This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.

<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />

answered Jun 22, 2014 at 9:11

nekno

19.3k5 gold badges45 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nekno · Accepted Answer · 2014-06-22 09:17:44Z

1

You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).

This line of jquery code will get the your radio buttons

var listItemArray = $("input[id^='welldata']")

edited Jun 22, 2014 at 9:17

nekno

19.3k5 gold badges45 silver badges48 bronze badges

answered Jun 22, 2014 at 9:09

Schadensbegrenzer

9506 silver badges19 bronze badges

3 Comments

nekno Over a year ago

You would not want to use a 'starts with' query with the hardcoded ID, because if you are inside a master page, the ID of the ContentPlaceHolder tag will be prepended to the IDs of all tags. You would want to use something like <%= String.Format("$(\"input[id^='{0}']\")", wellData.ClientID) %>

Schadensbegrenzer Over a year ago

In case of master pages of user controls I would rather use $("input[id*='welldata_']").

Sanjay Malhotra Over a year ago

sorry brother. No jQuery

malkam · Accepted Answer · 2014-06-22 09:01:39Z

0

Try this:

function next2() {

        if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
                   or

Use RequiredFieldValidator

<asp:RequiredFieldValidator   
            ID="ReqiredFieldValidator1"  
            runat="server"  
            ControlToValidate="welldata"  
            ErrorMessage="Select your welldata!"  
            >

Check these below links

http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb

http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus

answered Jun 22, 2014 at 9:01

malkam

2,3551 gold badge18 silver badges19 bronze badges

2 Comments

Schadensbegrenzer Over a year ago

document.getElementById('<%=welldata.ClientID %>') selects the rendered table and not the radio buttons.

malkam Over a year ago

Hmm. Try RequiredFieldValidator

Subash · Accepted Answer · 2017-08-25 06:58:17Z

0

var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');

var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
    if (rblItems[i].checked) {
        checkedItems = true;
        break;
    }
    else {
        checkedItems = false;
    }
}

if (!checkedItems) {//Hence No items checked
   alert("Nothing is checked");
   return false; 
}

edited Aug 25, 2017 at 6:58

answered Aug 23, 2017 at 13:09

Subash

11 bronze badge

2 Comments

Subash Over a year ago

As mentioned in the question he/she want to validate the radio button list whether the any of option is checked or not. so I'm getting the properties of the radio button list by using the id. So in the rblItems variable i can get all options in rbl. From that I'm using for loop to check each option is checked or not. If the any option is checked I'm setting the variable checkedItems as true and breaking loop. Then if checkedItems is true, we can found that one of the option is checked. Hope this make sense.

Arun Vinoth PrecogTechnologies Over a year ago

Add this in answer instead of comment.

Collectives™ on Stack Overflow

validation of radiobuttonlist in asp.net using javascript

4 Answers 4

Comments

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related