SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing or hid a DIV based on dynamic radio button selection.

    I am populating radio buttons from a query and therefore cannot hard code a display instruction within the individual radio buttons. My challenge is to show or hide a div based on the option the user clicks. In this case 3 options display, and the div tag should show if either of the first two are clicked but be hidden if the last one is clicked. I will use display:block and display:none to show or hide the div.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    How you do this depends on if you want only the last radio to hide the content, or if you want only the first two to hide the content. The code is quite different.

    This example demonstrates both ways.

    Code html4strict:
    <form>
    <p id="myRadios">
        <label><input type="radio" name="myRadio" value="radio1">Radio 1</label>
        <label><input type="radio" name="myRadio" value="radio2">Radio 2</label>
        <label><input type="radio" name="myRadio" value="radio3">Radio 3</label>
    </p>
    <div id="infoForAllButLast">
    <p>This is some information for all but the last option.</p>
    </div>
    <div id="infoForFirstTwo">
    <p>This is some information for the first two options.</p>
    </div>
    </form>

    Code javascript:
    document.getElementById('myRadios').onclick = function (evt) {
    	evt = evt || window.event;
    	targ = evt.target || evt.srcElement;
    	if (targ.nodeName !== 'INPUT') {
    		return;
    	};
    	els = targ.form.myRadio;
    	var elsLen = els.length;
     
    	// Show div for all but the last one
    	var elForAllButLast = document.getElementById('infoForAllButLast');
        if (els[elsLen - 1].checked) {
            elForAllButLast.style.display = 'none';
        } else {
            elForAllButLast.style.display = '';
        }
     
    	// Show div for only the first two options
    	var elForFirstTwo = document.getElementById('infoForFirstTwo'),
    		el,
    		i;
        for (i = 0; i < elsLen; i++) {
    		el = els[i];
    		if (el.checked) {
    			if (i < 2) {
    	        elForFirstTwo.style.display = '';
    			} else {
    				elForFirstTwo.style.display = 'none';
    			}
    	    }
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was not able to get this .js to work. I do want the div to display unless the third option is clicked. My radio buttons appear this way (asp):

    <input id="rEmp<&#37;=objRstEmp("codename")%>" name="rEmpStatus<%=chrIndex%>" type="radio" value="<%=objRstEmp("codename")%>" <% if objRstEmp("codename")=empStatus then response.write "checked" %> /><%=objRstEmp("codename")%>

    This produces
    <input id="rEmpFull Time" name="rEmpStatusA" type="radio" value="Full Time" checked />Full Time
    <script type="text/javascript">
    document.getElementById('rEmpStatusA').onclick = function (evt) {
    evt = evt || window.event;
    targ = evt.target || evt.srcElement;
    if (targ.nodeName !== 'INPUT') {
    return;
    };
    els = targ.form.rEmpStatusA;
    var elsLen = els.length;
    var elCurrentEmployer = document.getElementById('CurrentEmployer');
    if (els[elsLen - 1].checked) {
    elCurentEmployer.style.display = 'none';
    } else {
    elCurrentEmployer.style.display = 'block';
    }}
    </script>
    <input id="rEmpPart Time" name="rEmpStatusA" type="radio" value="Part Time" />Part Time
    <script type="text/javascript">
    document.getElementById('rEmpStatusA').onclick = function (evt) {
    evt = evt || window.event;
    targ = evt.target || evt.srcElement;
    if (targ.nodeName !== 'INPUT') {
    return;
    };
    els = targ.form.rEmpStatusA;
    var elsLen = els.length;
    var elCurrentEmployer = document.getElementById('CurrentEmployer');
    if (els[elsLen - 1].checked) {
    elCurentEmployer.style.display = 'none';
    } else {
    elCurrentEmployer.style.display = 'block';
    }}
    </script>
    <input id="rEmpUnemployed" name="rEmpStatusA" type="radio" value="Unemployed" />Unemployed

    I'm getting this error in Firebug:
    document.getElementById("rEmpStatusA") is null
    (?)()index.asp (line 1626)
    [Break on this error] document.getElementById('rEmpStatusA').onclick = function (evt) {
    Last edited by dbailey; Jul 10, 2008 at 12:13.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Line 1 of the produced html starts with:
    <input id="rEmpFull Time"

    The space isn't allowed in identifiers
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57, this may not be necessary but maybe some odd browser (in the future perhaps) will have nodeName as lowercase? isnt it better to just transform it via .toLower/UpperCase?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's not a matter of casing. It's that spaces are invalid in identifiers and you won't be able to use it while a space resides inside the identifier.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wasn't referring to the id attribute, and yes I do know spaces aren't allowed.. they shouldn't be since ID should only have one unique value.

  8. #8
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a feeling the spaces were the problem. I modified the application and convinced the user it would be better not to hide the div if the last radio button was checked. The value in the table was used for both the label and the form value.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •