javascript - Change Form Field Visibility in ModalPopupExtender -
wanted know if there's way change form field's visibility within modalpopup (from modalpopupextender) based upon dropdownlist's change in value. page's technique doesn't seem work: change visibility of asp.net label javascript.
javascript:
<script type="text/javascript"> function showhide() { if(document.getelementbyid('<%=ddlasvisibilitytest.clientid%>') == "show") { document.getelementbyid('<%=lblasbillingname.clientid%>').style.display = 'inherit'; document.getelementbyid('<%=txtasbillingname.clientid%>').style.display = 'inherit'; } if(document.getelementbyid('<%=ddlasvisibilitytest.clientid%>') == "hide") { document.getelementbyid('<%=lblasbillingname.clientid%>').style.display = 'none'; document.getelementbyid('<%=txtasbillingname.clientid%>').style.display = 'none'; } { </script> asp.net:
<asp:modalpopupextender okcontrolid="btnasokay" cancelcontrolid="btnascancel" backgroundcssclass="modalbackground" dropshadow="true" id="btnaddsupplier_modalpopupextender" runat="server" dynamicservicepath="" enabled="true" targetcontrolid="btnaddsupplier" popupcontrolid="pnladdsupplier"> <animations> <onshown> <fadein duration="0.25" fps="40" /> </onshown> <onhiding> <fadeout duration="0.25" fps="40" /> </onhiding> </animations> </asp:modalpopupextender> <asp:roundedcornersextender id="rce" runat="server" targetcontrolid="pnladdsupplier" radius="6" corners="all" /> <asp:button id="btnaddsupplier" runat="server" cssclass="buttonsmall" text="add suplier" /> <asp:panel id="pnladdsupplier" cssclass ="panel" runat="server"> <div class="asheader"> <asp:label id="lblasheader" runat="server" text="add supplier" cssclass="bodytxt" font-bold="true"></asp:label> </div> <div class="asinputs"> <asp:table runat="server"> <asp:tablerow id="trasvisibilitytest" runat="server"> <asp:tablecell id="tclblasvisibilitytest" runat="server"><asp:label id="lblasvisibilitytest" runat="server" text="test visibility" cssclass="bodytxt" font-bold="false"></asp:label></asp:tablecell> <asp:tablecell id="tcddlasvisibilitytest" runat="server"><asp:dropdownlist id="ddlasvisibilitytest" runat="server" onchange="showhide()"> <asp:listitem>show</asp:listitem> <asp:listitem>hide</asp:listitem> </asp:dropdownlist></asp:tablecell> </asp:tablerow> <asp:tablerow id="trasbillingname" runat="server"> <asp:tablecell id="tclblasbillingname" runat="server"><asp:label id="lblasbillingname" runat="server" text="supplier's billing name" cssclass="bodytxt" font-bold="false" style="display: none;"></asp:label></asp:tablecell> <asp:tablecell id="tctxtasbillingname" runat="server"><asp:textbox id="txtasbillingname" cssclass="bodytxt" runat="server" style="display: none;"></asp:textbox></asp:tablecell> </asp:tablerow> </asp:table> </div> <div class="divascontrols" align="center"> <asp:button id="btnasokay" runat="server" cssclass="buttonsmall" text="add supplier" style="display: none;" /> <asp:button id="btnascancel" runat="server" cssclass="buttonsmall" text="cancel" /> </div> </asp:panel> thanks lot in advance!
it doesn't checking value/text of dropdown. instead, comparing control value of "show" or "hide". try changing code , see if helps:
<script type="text/javascript"> function showhide() { var visibilityelem = document.getelementbyid('<%=ddlasvisibilitytest.clientid%>'); var visibilityelemtext = visibilityelem.options[visibilityelem.selectedindex].text; var display = (visibilityelemtext == 'show') ? 'inherit' : 'none'; document.getelementbyid('<%=lblasbillingname.clientid%>').style.display = display; document.getelementbyid('<%=txtasbillingname.clientid%>').style.display = display; } </script>
Comments
Post a Comment