[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2933
  • Last Modified:

How do I change the radiobuttonlist's text property using javascript

Hi experts,

I have a radiobuttonlist with nine radiobuttons that, at runtime depending on what year it is, must change the text property i.e the text displayed next to the actual radiobuttons in the radiobuttonlist. With the code I've got so far I get the correct ID for the buttons and I'm able to get/set the value property, but can't set the text (visual) property. Below I'll inclued the relevant HTML and javascript code.

The HTML code:
<asp:RadioButtonList ID='RdoLstYear' RepeatDirection='Horizontal' runat="server" RepeatColumns="3" RepeatLayout="table">
                            <asp:ListItem>2003</asp:ListItem>
                            <asp:ListItem>2004</asp:ListItem>
                            <asp:ListItem>2005</asp:ListItem>
                            <asp:ListItem>2006</asp:ListItem>
                            <asp:ListItem>2007</asp:ListItem>
                            <asp:ListItem>2008</asp:ListItem>
                            <asp:ListItem>2009</asp:ListItem>
                            <asp:ListItem>2010</asp:ListItem>
                            <asp:ListItem>2011</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>

//The javascript code:
<script language="javascript" type="text/javascript">
    function togglePannelStatus(content)
    {
       
        var ListControl= document.getElementById("<%=RdoLstYear.ClientID%>");
        var options = ListControl.getElementsByTagName('input');
        for(i=0;i<options.length;i++){
              var opt = options[i];
              //opt[i].text = 2004;             //this does not work. I want to be able to set this to eg. yearVar + i
        }
}
</script>
0
Caroline_Swart
Asked:
Caroline_Swart
  • 3
  • 2
1 Solution
 
TimYatesCommented:
Can you post the generated HTML for that?

I'm not familiar with what the asp:ListItem tag outputs
0
 
Caroline_SwartAuthor Commented:
Is this what you are looking for?

<div style="border: silver 1px solid; float:right;">
                        <table id="CalendarView1_RdoLstYear" border="0">
      <tr>
            <td><input id="CalendarView1_RdoLstYear_0" type="radio" name="CalendarView1$RdoLstYear" value="2003" /><label for="CalendarView1_RdoLstYear_0">2003</label></td><td><input id="CalendarView1_RdoLstYear_1" type="radio" name="CalendarView1$RdoLstYear" value="2004" /><label for="CalendarView1_RdoLstYear_1">2004</label></td><td><input id="CalendarView1_RdoLstYear_2" type="radio" name="CalendarView1$RdoLstYear" value="2005" /><label for="CalendarView1_RdoLstYear_2">2005</label></td>
      </tr><tr>
            <td><input id="CalendarView1_RdoLstYear_3" type="radio" name="CalendarView1$RdoLstYear" value="2006" /><label for="CalendarView1_RdoLstYear_3">2006</label></td><td><input id="CalendarView1_RdoLstYear_4" type="radio" name="CalendarView1$RdoLstYear" value="2007" /><label for="CalendarView1_RdoLstYear_4">2007</label></td><td><input id="CalendarView1_RdoLstYear_5" type="radio" name="CalendarView1$RdoLstYear" value="2008" /><label for="CalendarView1_RdoLstYear_5">2008</label></td>
      </tr><tr>
            <td><input id="CalendarView1_RdoLstYear_6" type="radio" name="CalendarView1$RdoLstYear" value="2009" /><label for="CalendarView1_RdoLstYear_6">2009</label></td><td><input id="CalendarView1_RdoLstYear_7" type="radio" name="CalendarView1$RdoLstYear" value="2010" /><label for="CalendarView1_RdoLstYear_7">2010</label></td><td><input id="CalendarView1_RdoLstYear_8" type="radio" name="CalendarView1$RdoLstYear" value="2011" /><label for="CalendarView1_RdoLstYear_8">2011</label></td>
      </tr>
</table>
                    </div>
                </div>
0
 
TimYatesCommented:
Right....try this:

    function togglePannelStatus(content)
    {
        var ListControl = document.getElementById( "<%=RdoLstYear.ClientID%>" ) ;
        var options = ListControl.getElementsByTagName( 'label' ) ;
        for( i=0 ; i < options.length ; i++ )
        {
              options[ i ].innerText = '2004' ;
        }
}
0
 
TimYatesCommented:
:-)
0
 
Caroline_SwartAuthor Commented:
This is exactly what I needed. Thankyou for a clear and quick response
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now