We help IT Professionals succeed at work.

RadioButtonList remove all contents and refill using java script

saljas
saljas asked
on
using Java script

I am trying to remove all contents of RadioButtonList and refill it with another items
is there away

I appreciate it if someone helps
Comment
Watch Question

Author

Commented:
Thanks for the help

what is JavaScript T/A added?
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Do you want to do this on the server (as part of your ASP.Net code) or on the client in JavaScript?

Author

Commented:
Thanks Mr Julian

I am a very old customer of this forum.  In the past there was not exact classifications to some of my questions (or maybe I could not find them).
As a result - topics to me is to invite people that my question is related to subjects within a specific range of fields not within an exact field.

Java
Javascript
asp
html
The last four classifications are in one field, so experts of Java is expected to be experts in html and javascript and asp, That is why I am not specific in selecting the exact class.

I will try next time to be more exact is picking topics.

Returning to my question- The needed code is to be done on the client browser in order to avoid post back delay.
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Returning to my question- The needed code is to be done on the client browser in order to avoid post back delay.
I am trying to understand why you want to do t his. If you don't want the radiolist then why render it in the first place.

Assuming there is a valid reason for this -can you show us the rendered code (HTML not the ASP code) and highlight what it is you want to do with that code.

If this is clientside and we need to work with JavaScript we need to work with the Browser version of the site - not the ASP code behind it.

Author

Commented:
Assume Listbox that contains 1000 items
Assume there are 28 button each with a letters,

If visitor clicks on one button, then list of names that start with picked letter appears in RadioButtonList

if visitor wants to know more about one of RadioButtonList item then he clicks on one RadioButtonList item

So RadioButtonList must be continuously changing as the visitor changes the letter

On the site there are many classifications letters, colors, subjects, ....
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Can you show me want a rendered RadioButtonList looks like - I need to see the html to link the JavaScript to.

Author

Commented:
rendered meaning?

the following is the syntax

<asp:RadioButtonList ID="RLst_CharGroup" runat="server"></asp:RadioButtonList>

I am trying to clear it using javascript

                document.getElementById("<%= RLst_CharGroup.ClientID %>").selectedIndex = -1;
                document.getElementById("<%= RLst_CharGroup.ClientID %>").options.length = 0;

which is not acceptable and it gives error
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
No that is ASP code - I need to see the rendered HTML code -  what is sent to the browser,

The JavaScript operates on the output from the ASP script - so that is what we need to work with.

Author

Commented:
On google chrome - right click the web page then inspect

Is this rendered HTML code?
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Yes - or do a right click and View Source.

If possible strip down the code to just the radio list (for now) if you have a large page posting the whole thing could make it difficult to find what we are looking for.

Right click the lists - go to console and right click - copy - copy outer html

For each item you want to modify.

Post that here
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Alternatively - if you have a link OR can setup a Fiddle or similar that would be better.

Author

Commented:
Before I post this question I have made too many experiments and changed
I will waste time trying to get a reasonable render

It is better to forget about render

To clear listbox using javascript

                document.getElementById("<%= Listbox.ClientID %>").selectedIndex = -1;
                document.getElementById("<%= Listbox.ClientID %>").options.length = 0;
 
Works fine

but to clear RadioButtonList

                document.getElementById("<%= RadioButtonList.ClientID %>").selectedIndex = -1;
                document.getElementById("<%= RadioButtonList.ClientID %>").options.length = 0;

Did not work, is there a way
SILVER EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Without html it is very difficult to see what is going on.

I need to see how a RadioButtonList is rendered. You are trying to access the options property on the element - but I am guessing that the ListBox is implemented as a <select> (which has an options property) and a RadioButtonList is not.

Please provide a working link or some HTML so we can see what is going on.

Author

Commented:
The following is part of the render of adding items to radiobuttonlist

            <table width="100%" align="right" id="LawGroupTable" style="margin-top: -10px; display: none;" bgcolor="#666666">
                  <tbody>
                        <tr>
                              <td>
                                    <table id="RLst_CharGroup">
                                          <tbody>
                                          <tr>
                                                <td>
                                                <input name="RLst_CharGroup" id="RLst_CharGroup_0" type="radio" value="a">
                                                <label for="RLst_CharGroup_0">1</label>
                                                </td>
                                          </tr>
                                          <tr>
                                                <td>
                                                <input name="RLst_CharGroup" id="RLst_CharGroup_1" type="radio" value="b">
                                                <label for="RLst_CharGroup_1">2</label>
                                                </td>
                                          </tr>
                                          <tr>
                                                <td>
                                                <input name="RLst_CharGroup" id="RLst_CharGroup_2" type="radio" value="c">
                                                <label for="RLst_CharGroup_2">3</label>
                                                </td>
                                          </tr>
                                          </tbody>
                                    </table>
                              </td>
                        </tr>
                  </tbody>
            </table>
Commented:
Clearing the RadioButtonList

document.getElementById("<%= RLst_CharGroup.ClientID %>").innerHTML = "";


Refill it

document.getElementById('RLst_CharGroup').innerHTML = '<tbody><tr><td><input name="RLst_CharGroup" id="RLst_CharGroup_0" type="radio" value="a">' +
                                '<label for="RLst_CharGroup_0">1</label></td></tr><tr><td><input name="RLst_CharGroup" id="RLst_CharGroup_1" type="radio" value="b">' +
                                '<label for="RLst_CharGroup_1">2</label></td></tr><tr><td><input name="RLst_CharGroup" id="RLst_CharGroup_2" type="radio" value="c">' +
                                '<label for="RLst_CharGroup_2">3</label></td></tr>';

Author

Commented:
Thank you Mr. Julian for trying to help, I also learned from you the meaning of Render

Explore More ContentExplore courses, solutions, and other research materials related to this topic.