i learning how write unobtrusive javascript, , i've been able work things out, i'm having trouble toggling element's visibility on , off using checkbox. keep in mind designer first, programmer, oh 18th or so. in other words, novice when comes programming. (note: form endodontics firm referral form, hence industry terms).
also, please not suggest jquery; know exists, , use often. want learn how in pure javascript. here important html snippets (this created in asp.net):
<ol> <li> <fieldset> <legend>which of these procedures required? (select @ least one)<span class="required"> *</span></legend> <label id="procedure01"><asp:checkbox id="chkendodonticprocedure01" groupname="endodonticprocedure" runat="server" />consultation evaluation of tooth</label> <label id="procedure02"><asp:checkbox id="chkendodonticprocedure02" groupname="endodonticprocedure" runat="server" />re-treatment of tooth</label> <label id="procedure03"><asp:checkbox id="chkendodonticprocedure03" groupname="endodonticprocedure" runat="server" />treatment of tooth</label> </fieldset> <ol id="consultation"> <li> <asp:label id="lblconsultationtoothnumber" associatedcontrolid="txtconsultationtoothnumber" runat="server">consultation tooth number</asp:label> <asp:textbox id="txtconsultationtoothnumber" cssclass="textbox" runat="server" /> </li> <li> <fieldset> <legend>do of these conditions apply?</legend> <label><asp:checkbox id="chktoothcondition01" groupname="toothcondition" runat="server" />vague toothache</label> <label><asp:checkbox id="chktoothcondition02" groupname="toothcondition" runat="server" />pain, swelling</label> <label><asp:checkbox id="chktoothcondition03" groupname="toothcondition" runat="server" />sensitivity heat</label> <label><asp:checkbox id="chktoothcondition04" groupname="toothcondition" runat="server" />sensitivity cold</label> <label><asp:checkbox id="chktoothcondition05" groupname="toothcondition" runat="server" />sensitivity percussion</label> <label><asp:checkbox id="chktoothcondition06" groupname="toothcondition" runat="server" />possible combined perio-endo lesion</label> <label><asp:checkbox id="chktoothcondition07" groupname="toothcondition" runat="server" />suspected cracked tooth/root</label> </fieldset> </li> </ol> <ol id="retreatment"> <li> <asp:label id="lblretreatmenttoothnumber" associatedcontrolid="txtretreatmenttoothnumber" runat="server">re-treatment tooth number</asp:label> <asp:textbox id="txtretreatmenttoothnumber" cssclass="textbox" runat="server" /> </li> <li> <asp:label id="lblpreviousrctdate" associatedcontrolid="txtpreviousrctdate" runat="server">date of previous rct</asp:label> <asp:textbox id="txtpreviousrctdate" cssclass="textbox datepicker" runat="server" /> </li> </ol> <ol id="treatment"> <li> <asp:label id="lbltreatmenttoothnumber" associatedcontrolid="txttreatmenttoothnumber" runat="server">treatment tooth number</asp:label> <asp:textbox id="txttreatmenttoothnumber" cssclass="textbox" runat="server" /> </li> <li> <fieldset> <legend>what reason treatment? (check apply)</legend> <label><asp:checkbox id="chktreatmentreason01" groupname="treatmentreason" runat="server" />necessary proper restoration</label> <label><asp:checkbox id="chktreatmentreason02" groupname="treatmentreason" runat="server" />pulp exposed , vital</label> <label><asp:checkbox id="chktreatmentreason03" groupname="treatmentreason" runat="server" />pulp exposed , non-vital</label> <label><asp:checkbox id="chktreatmentreason04" groupname="treatmentreason" runat="server" />tooth opened , medicated</label> <label><asp:checkbox id="chktreatmentreason05" groupname="treatmentreason" runat="server" />x-ray revealed radiolucency/pulpal involvement</label> </fieldset> </li> <li> <fieldset> <legend>is x-ray included revealed radiolucency/pulpal involvement?</legend> <label><asp:radiobutton id="rdoxrayincluded01" groupname="xrayincluded" runat="server" />yes</label> <label><asp:radiobutton id="rdoxrayincluded02" groupname="xrayincluded" runat="server" />no</label> </fieldset> </li> </ol> </li> using unobtrusive javascript, grab form id ("referralform"), create 2 arrays contain related element ids, hide elements want turned off css class, , apply onclick event apply css class reveals elements:
function prepareaccordion() { if (document.getelementbyid && document.getelementsbytagname) { if (document.getelementbyid("referralform")) { var accordionids = new array(); accordionids[0] = document.getelementbyid("minorparent"); accordionids[1] = document.getelementbyid("consultation"); accordionids[2] = document.getelementbyid("retreatment"); accordionids[3] = document.getelementbyid("treatment"); var revealids = new array(); revealids[0] = document.getelementbyid("minoryes"); revealids[1] = document.getelementbyid("minorno"); revealids[2] = document.getelementbyid("procedure01"); revealids[3] = document.getelementbyid("procedure02"); revealids[4] = document.getelementbyid("procedure03"); (var = 0; < accordionids.length; i++) { accordionids[i].classname = "accordion-collapsed"; } revealids[0].onclick = function revealaccordion() { accordionids[0].classname = "accordion-revealed"; } revealids[1].onclick = function revealaccordion() { accordionids[0].classname = "accordion-collapsed"; } x = 0; revealids[2].onclick = function revealaccordion() { if (x == 0) { accordionids[1].classname = "accordion-revealed"; x++; } else { accordionids[1].classname = "accordion-collapsed"; x--; } } y = 0; revealids[3].onclick = function revealaccordion() { if (y == 0) { accordionids[2].classname = "accordion-revealed"; y = 1; } else { accordionids[2].classname = "accordion-collapsed"; y = 0; } } z = 0; revealids[4].onclick = function revealaccordion() { if (z == 0) { accordionids[3].classname = "accordion-revealed"; z = 1; } else { accordionids[3].classname = "accordion-collapsed"; z = 0; } } } } } function addloadevent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () { if (oldonload) { oldonload(); } func(); } } } addloadevent(prepareaccordion); there better way create "on/off" toggle settings checkboxes using "1" , "0" , flipping between them, again, i'm not programmer. issue when applying flip between "1" , "0", onclick event works when directly clicking within checkbox, , not on label. onclick works fine when applied radio button's label, must flip between "1" , "0" throwing off.
any appreciated.
what — and, in fact employer's site — mark page elements class, "toggleonswitch" (i tend use irritating long names that). element have couple of "data-" attributes: "data-switch", containing "id" value checkbox or radio button or <option> element controls toggling; "data-toggle-class", containing class toggle on , off (like, "hidden" or "inactive" or whatever); , maybe 1 or 2 others i'm forgetting.
the unobtrusive javascript looks class, , each toggled element sets event handlers on switch element (the checkbox, in case). event handlers work of adding/removing class toggled element.
it's little more complicated if want toggle on radio buttons, because when 1 radio button switches on, friends switch off, handler has know trigger toggle handlers on other radio buttons same name, in case control page element visibility (or whatever added/removed class does). coded mine if "data-switch" value starts "!", "!togglecheckbox", means reverse sense of toggle. that's handy when particular checkbox switches 1 thing off @ same time switches thing on.
Comments
Post a Comment