c# - dynamically hide textbox based on radio button checked state -
i have set of radio buttons corresponding textboxes on aspx page. want textboxes either show or hide depending on relative radio button checked state.
during page load, i'm pulling of controls on panel, looping through each 1 , if it's typeof radiobutton add javascript function radio button run onchange. based on radio checked state, function show or hide textbox. wasn't sure how tell function textbox hide based on radio button other make own attribute radio button , use in page_load. this, me, best solution i've come short of in-lining js function calls.
but isn't working.
regardless of functionality of code, isn't how want it. want list or array of radio buttons panel (instead of grabbing of controls), , add function it. , adding attribute radio button doesn't seem cleanest way nor in-lining calls. regardless of solution path chosen, still need know textbox i'm hiding or showing goes along radio button. , help, ideas, , wisdom appreciated.
html:
<div id="divpersonnel" style="margin-right: auto; margin-left: auto; width: 95%; display: block; vertical-align: middle;"> <asp:panel id="pnlpersonnel" runat="server"> <div style="width: 300px; margin-right: auto; margin-left: auto;"> <asp:table runat="server" borderstyle="none" id="tblpersonnelqueryselect"> <asp:tablerow verticalalign="middle"> <asp:tablecell> <asp:radiobutton id="rdbid" runat="server" textbox="txbid"/> </asp:tablecell> <asp:tablecell> <asp:label class="left" id="lblid" runat="server" text="id:" style=""></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox class="right" id="txbid" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow verticalalign="middle"> <asp:tablecell> <asp:radiobutton id="rdbfn" runat="server" textbox="txbfn"/> </asp:tablecell> <asp:tablecell> <asp:label class="left" id="lblfname" runat="server" text="first name:" style=""></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox class="right" id="txbfn" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow verticalalign="middle"> <asp:tablecell> <asp:radiobutton id="rdbln" runat="server" textbox="txbln"/> </asp:tablecell> <asp:tablecell> <asp:label class="left" id="lbllname" runat="server" text="last name:" style=""></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox class="right" id="txbln" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow verticalalign="middle"> <asp:tablecell> <asp:radiobutton id="rdbpr" runat="server" textbox="txbpr"/> </asp:tablecell> <asp:tablecell> <asp:label class="left" id="lblrate" runat="server" text="pay rate:" style=""></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox class="right" id="txbpr" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow verticalalign="middle"> <asp:tablecell> <asp:radiobutton id="rdbsd" runat="server" textbox="dtpkrsd"/><br /> <asp:radiobutton id="rdbed" runat="server" textbox="dtpkred"/> </asp:tablecell> <asp:tablecell> <asp:label class="left" id="lblstartdate" runat="server" text="start date:" style=""></asp:label> <br /> <asp:label class="left" id="lblenddate" runat="server" text="end date:" style=""></asp:label> </asp:tablecell> <asp:tablecell> <input class="right" id="dtpkrsd" onclick="$(this).datepicker();"/><br /> <input class="right" id="dtpkred" onclick="$(this).datepicker();"/> </asp:tablecell> </asp:tablerow> </asp:table> </div> </asp:panel> </div> javascript:
function toggletxb(rdb, txb) { if ($(rdb).attr('checked') == true) { $(txb).show(); } else { $(txb).hide(); } } c# (runs in page_load):
control[] ctrspersonnel = new control[pnlpersonnel.controls.count]; pnlpersonnel.controls.copyto(ctrspersonnel, 0); foreach (control _ctr in ctrspersonnel) { if (_ctr.gettype() == typeof(radiobutton)) { ((radiobutton)_ctr).attributes.add("onclick", "togglecheckedstate($(this));toggletxb($(this), $(#" + ((radiobutton)_ctr).["textbox"] + ");"); continue; } else if (_ctr.gettype() == typeof(textbox)) { ((textbox)_ctr).attributes.add("onload", "$(this).hide();"); continue; } else { continue; } } i ended using element ids in array , looping through each index add attribute 'onclick' , functions attribute.
html remained same , c# has been removed.
//checkbox ids var checks = ['<%= chbid.clientid%>', '<%= chbfn.clientid%>', '<%= chbln.clientid%>', '<%= chbpr.clientid%>', '<%= chbdtpkrsd.clientid%>', '<%= chbdtpkred.clientid%>', '<%= chbuid.clientid%>', '<%= chbusername.clientid%>', '<%= chbactivityid.clientid%>', '<%= chbip.clientid %>', '<%= chbformaccessed.clientid %>', '<%= chbdoa.clientid %>']; // text box ids var texts = ['<%= txbid.clientid%>', '<%= txbfn.clientid%>', '<%= txbln.clientid%>', '<%= txbpr.clientid%>', 'txbdtpkrsd', 'txbdtpkred', '<%= txbuid.clientid%>', '<%= txbusername.clientid%>', '<%= txbactivityid.clientid%>', '<%= txbip.clientid %>', '<%= txbformaccessed.clientid %>', 'dtpkrdoa']; //loop through each id , add functions (var = 0; < checks.length; i++) { $('#' + checks[i]).attr('onclick', 'toggletxb($(this),$("#' + texts[i] + '"))'); $('#' + texts[i]).hide(); }
richard,
since radio buttons , textboxes not generated dynamically, in other words hard coded in html, suggest use client side code. try use input type="radio" instead of asp radio buttons. add onclick = yourfunction(this); notice there no $ sign.
once onclick event has fired can textbox using clientid opposed server id.
example: var mytextbox = $get("<%=textbox1.clientid%>");
i hope helps
Comments
Post a Comment