SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down List - Selection Change

    Here's my inquiry: I have a drop down list which holds days of the week, Monday-Friday. When a visitor selects a day, I need to automatically populate four radio buttons, each of which has a different time available.

    Can this be done via JavaScript? Would you build an array for the radio buttons based on the user selection from the drop down list?

    Thanks for any suggestions/code ideas.
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I have so far:

    Drop down list:

    Code:
    <select name="day" id="day" onchange="OnChange(document.topform.day);">
    <option value="null">--select a day--</option>
    <option value="monday">Monday</option>
    <option value="tuesday">Tuesday</option>
    <option value="wednesday">Wednesday</option>
    <option value="thursday">Thursday</option>
    <option value="friday">Friday</option>
    </select>


    The function OnChange:

    Code:
    function OnChange(dropdown){
    if(document.topform.day=="monday"){
     document.write("<input name='monday' type='radio' value='9am' />");
     }
    }


    Filling the radio buttons inside the table cell:

    Code:
    <script type="text/javascript">
    OnChange();
    </script>


    When I select a day, nothing happens. Any suggestions, something like this seems like it should work.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    function show (){
    
    var s = document.getElementById('day');
    
    var td = document.getElementById('myCell');
    
    if(s.options[s.selectedIndex].text =="Monday" ) {
    
     td.innerHTML="<input name='monday' type='radio' value='9am' >" ;
     }
    /* if(s.options[s.selectedIndex].text =="Tuesday" ) {
    
     td.innerHTML="...." ;
     }
    .....
    
    */
    }
    </script>
    
    <style type="text/css">
    td { width:100px; height:100px; background-color:blue; color:red;}
    </style>
    
    </head>
    <body>
    <form id="topForm">
    
    <select id="day" onchange="show ();">
    <option value="null">--select a day--</option>
    <option value="monday">Monday</option>
    <option value="tuesday">Tuesday</option>
    <option value="wednesday">Wednesday</option>
    <option value="thursday">Thursday</option>
    <option value="friday">Friday</option>
    </select>
    
    </form>
    <table>
    <tr>
    <td id="myCell"> </td>
    <td> Cell</td>
    <td> Cell </td>
    </tr>
    </table>
    Last edited by muazzez; Jan 22, 2007 at 12:33. Reason: change variable name, add if

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That'll work, but it's inaccessible to non-js browsers. Also, I assume you want different times for different days, otherwise you would just put a "times" input in. This code will allow all the fields to be available if JS isn't avaiable:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    function getElementsByClass(searchClass,node,tag) {
    	var classElements = new Array();
    	if (node == null) node = document;
    	if (tag == null) tag = '*';
    	var els = node.getElementsByTagName(tag);
    	var elsLen = els.length;
    	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    	for (i = 0, j = 0; i < elsLen; i++) {
    		if ( pattern.test(els[i].className) ) {
    			classElements[j] = els[i];
    			j++;
    		}
    	}
    	return classElements;
    }
    
    var timesInputs;
    
    function resetInputs() {
    	for (x in timesInputs) {
    		timesInputs[x].style.display = "none";
    	}
    }
    
    window.onload = function() {
    	timesInputs = getElementsByClass("timeInput");
    	resetInputs();
    	timesInputs[0].style.display = "block";
    }
    
    function dayOptions(input) {
    	resetInputs();
    	timesInputs[input.selectedIndex].style.display = "block";
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<form action="">
    			<select name="day" id="day" onchange="dayOptions(this);">
    				<option value="monday" selected>Monday</option>
    				<option value="tuesday">Tuesday</option>
    				<option value="wednesday">Wednesday</option>
    				<option value="thursday">Thursday</option>
    				<option value="friday">Friday</option>
    			</select>
    			<p class="timeInput">Monday Times:<br/><input type="radio" name="monTimes" value="9am"> 9am
    				<input type="radio" name="monTimes" value="10am"> 10am
    				<input type="radio" name="monTimes" value="1pm"> 1pm
    				<input type="radio" name="monTimes" value="2pm"> 2pm</p>
    			<p class="timeInput">Tuesday Times:<br/><input type="radio" name="tueTimes" value="9am"> 9am
    				<input type="radio" name="tueTimes" value="10am"> 11am
    				<input type="radio" name="tueTimes" value="1pm"> 2pm
    				<input type="radio" name="tueTimes" value="2pm"> 3pm</p>
    			<p class="timeInput">Wednesday Times:<br/><input type="radio" name="wedTimes" value="9am"> 7am
    				<input type="radio" name="wedTimes" value="10am"> 8am
    				<input type="radio" name="wedTimes" value="1pm"> 2pm
    				<input type="radio" name="wedTimes" value="2pm"> 4pm</p>
    			<p class="timeInput">Thursday Times:<br/><input type="radio" name="thuTimes" value="9am"> 6am
    				<input type="radio" name="thuTimes" value="10am"> 7am
    				<input type="radio" name="thuTimes" value="1pm"> 12pm
    				<input type="radio" name="thuTimes" value="2pm"> 2pm</p>
    			<p class="timeInput">Friday Times:<br/><input type="radio" name="friTimes" value="9am"> 10am
    				<input type="radio" name="friTimes" value="10am"> 11am
    				<input type="radio" name="friTimes" value="1pm"> 12pm
    				<input type="radio" name="friTimes" value="2pm"> 1pm</p>
    		</form>
    	</body>
    </html>
    Also, don't know why you added a table in there, plus "e" is sometimes used for events in some browsers, so I would use a different variable name.

  5. #5
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for the help, my JS skills are intermediate at best. When you say "all" the times to be available if JS isn't available, what exactly do you mean?
    Ryan Butler

    Midwest Web Design

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd, with JS enabled, all the radio buttons show.
    Ryan Butler

    Midwest Web Design

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Obviously I'm just doing something wrong in my original file, works fine in a blank file. Would there be a way to compensate for an initial null value field for the drop down list?

    Thanks again for the help.
    Ryan Butler

    Midwest Web Design

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code at the bottom will add a "Please Choose" if you really want one... in general, I am not a big fan of that way of doing it. All the fields are hidden initially with this code:
    Code:
    window.onload = function() {
    	timesInputs = getElementsByClass("timeInput");
    	resetInputs();
    }
    so non-JS browers can access all fields of the form, even if they have to choose it manually. If you have another onload event (like body onload="yourFunction();"), it will conflict with that. You may need to convert it to a named function and call it from your body onload event. I don't use body onload, as it's obtrusive JS, better to separate content markup and JS so it's easier to change.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    function getElementsByClass(searchClass,node,tag) {
    	var classElements = new Array();
    	if (node == null) node = document;
    	if (tag == null) tag = '*';
    	var els = node.getElementsByTagName(tag);
    	var elsLen = els.length;
    	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    	for (i = 0, j = 0; i < elsLen; i++) {
    		if ( pattern.test(els[i].className) ) {
    			classElements[j] = els[i];
    			j++;
    		}
    	}
    	return classElements;
    }
    
    var timesInputs;
    
    function resetInputs() {
    	for (x in timesInputs) {
    		timesInputs[x].style.display = "none";
    	}
    }
    
    window.onload = function() {
    	timesInputs = getElementsByClass("timeInput");
    	resetInputs();
    }
    
    function dayOptions(input) {
    	resetInputs();
    	if (input.value) {
    		timesInputs[input.selectedIndex-1].style.display = "block";
    	}
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<form action="">
    			<select name="day" id="day" onchange="dayOptions(this);">
    				<option value="" selected>Please Choose a Day</option>
    				<option value="monday">Monday</option>
    				<option value="tuesday">Tuesday</option>
    				<option value="wednesday">Wednesday</option>
    				<option value="thursday">Thursday</option>
    				<option value="friday">Friday</option>
    			</select>
    			<p class="timeInput">Monday Times:<br/><input type="radio" name="monTimes" value="9am"> 9am
    				<input type="radio" name="monTimes" value="10am"> 10am
    				<input type="radio" name="monTimes" value="1pm"> 1pm
    				<input type="radio" name="monTimes" value="2pm"> 2pm</p>
    			<p class="timeInput">Tuesday Times:<br/><input type="radio" name="tueTimes" value="9am"> 9am
    				<input type="radio" name="tueTimes" value="10am"> 11am
    				<input type="radio" name="tueTimes" value="1pm"> 2pm
    				<input type="radio" name="tueTimes" value="2pm"> 3pm</p>
    			<p class="timeInput">Wednesday Times:<br/><input type="radio" name="wedTimes" value="9am"> 7am
    				<input type="radio" name="wedTimes" value="10am"> 8am
    				<input type="radio" name="wedTimes" value="1pm"> 2pm
    				<input type="radio" name="wedTimes" value="2pm"> 4pm</p>
    			<p class="timeInput">Thursday Times:<br/><input type="radio" name="thuTimes" value="9am"> 6am
    				<input type="radio" name="thuTimes" value="10am"> 7am
    				<input type="radio" name="thuTimes" value="1pm"> 12pm
    				<input type="radio" name="thuTimes" value="2pm"> 2pm</p>
    			<p class="timeInput">Friday Times:<br/><input type="radio" name="friTimes" value="9am"> 10am
    				<input type="radio" name="friTimes" value="10am"> 11am
    				<input type="radio" name="friTimes" value="1pm"> 12pm
    				<input type="radio" name="friTimes" value="2pm"> 1pm</p>
    		</form>
    	</body>
    
    </html>

  9. #9
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have another onload event (like body onload="yourFunction();"), it will conflict with that. You may need to convert it to a named function and call it from your body onload event.
    I don't follow this statement. Are you saying to create a custom function which contains all of this code and then call it onload?

    Also, is timeInput the generic name of all radio buttons in your example?
    Ryan Butler

    Midwest Web Design

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rbutler View Post
    I don't follow this statement. Are you saying to create a custom function which contains all of this code and then call it onload?
    Yes, if you have another function called at load you need to convert our function assigned to onload to a named function and call it with your other function:

    Code:
    function setupTimeInputs() {
    	timesInputs = getElementsByClass("timeInput");
    	resetInputs();
    }
    
    <body onload="yourOtherFunc();setupTimeInputs();">
    Quote Originally Posted by rbutler View Post
    Also, is timeInput the generic name of all radio buttons in your example?
    No, "timeInput" in just a classname I use to delineate the elements that I want to hide. You could name them with IDs and manually load them into an array instead of using the custom getElementsByClass function, but I perfer this way.

  11. #11
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could I not name the radio buttons the same (on the input tag), and provide different values? Or how do you capture the name for the radio buttons? Radio buttons share the same name since they're a group.
    Last edited by rbutler; Jan 23, 2007 at 11:52.
    Ryan Butler

    Midwest Web Design

  12. #12
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rbutler View Post
    Could I not name the radio buttons the same (on the input tag), and provide different values? Or how do you capture the name for the radio buttons? Radio buttons share the same name since they're a group.
    You can do that, it won't mess up the script.

  13. #13
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright...it works fine now. Thanks a lot for the help, it's appreciated.
    Ryan Butler

    Midwest Web Design


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
  •