SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select box to trigger a function

    I'm wanting to use the various options in this select box:

    HTML Code:
    <form action="" name="deleteClients">	
    		<select name="selectTherapist" id="selectTherapist">
    			<option selected="selected">All Therapists</option>
    			<option>Paul C. McNair, M.D.</option>
    			<option>June Gray, MSW</option>		
    			<option>Susan Carter, LPC</option>
    			<option>Derek J. Smith, Ph.D.</option>
    		</select>
    </form>
    to call this function:

    Code:
    function showHide(elementID, show)
    {
    	var el = document.getElementById(elementID);
    
    	if(show)
    	{
    		el.style.display = '';
    	}
    	else
    	{
    		el.style.display = 'none';
    	}
    
    	return false;
    }
    For example, for radio buttons, I've been writing it something like this and it works fine. How can I translate this into the select box options?

    Code:
    <fieldset id="deleteClientFieldset" style="display: none;">
    <legend><span class="brownPopupLabels">Delete Client(s) of</span></legend>
    	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteAllClients', 1); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />All Therapists
    			
    	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deletePaulsClients', 1); showHide('deleteAllClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />Paul 
    			
    	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteJunesClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />June 
    			
    	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteSusansClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteDereksClients', 0);" />Susan 
    			
    	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteDereksClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0);" />Derek 
    		
            <fieldset id="deleteAllClients" style="display: none;">
    	<legend><span class="brownPopupLabels">All Therapists</span></legend>
    				These are All clients.
    	</fieldset>
    			
    	<fieldset id="deletePaulsClients" style="display: none;">
    	<legend><span class="brownPopupLabels">Paul C. McNair, M.D.</span></legend>
    				These are Paul's clients.
    	</fieldset>
    			
    	<fieldset id="deleteJunesClients" style="display: none;">
    	<legend><span class="brownPopupLabels">June Gray, MSW</span></legend>
    				These are June's clients.
    	</fieldset>
    			
    	<fieldset id="deleteSusansClients" style="display: none;">
    	<legend><span class="brownPopupLabels">Susan Carter, LPC</span></legend>
    				These are Susan's clients.
    	</fieldset>
    			
    	<fieldset id="deleteDereksClients" style="display: none;">
    	<legend><span class="brownPopupLabels">Derek J. Smith, Ph.D.</span></legend>
    				These are Derek's clients.
    	</fieldset>
    		
    </fieldset>
    Last edited by tryin_to_learn; Nov 4, 2006 at 22:50.

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still struggling with this. At first I thought I would have to put the showHide function in the select box, like this:

    Code:
    <select id="selectTherapists" name="selectTherapists" onchange="showHide(param1, param2)"; >
    Then the trick would be to pass it the parameters based on the value of the option selected. The problem is that each value actually needs to trigger the showHide function several times because each one shows two fieldset ids and hides several others.

    When I got that far, I thought maybe I should write a whole new function that simply retrieved the value of the selected option, then set the various id display styles accordingly. So then the select box would look something like:

    HTML Code:
    <select id="selectTherapists" name="selectTherapists" onchange="getOptionValues()"; >
    		<option selected="selected">Choose a Therapist</option>
    		<option value="all">All Therapists</option>
    		<option value="paul">Paul C. McNair, M.D.</option>
    		<option value="june">June Gray, MSW</option>		
    		<option value="susan">Susan Carter, LPC</option>
    		<option value="derek">Derek J. Smith, Ph.D.</option>
    </select>
    At that point, I wasn't sure if I should try to call the showHide() function from within the getOptionValues() function, or whether I should just set the various styles I need. I tried both and couldn't get either to work -- I think just because of syntax errors. I'm not terribly good at this.

    In pseudo code, it would be something like this:

    Code:
    function getOptionValues() {
         if (value of the select box == "all") {
              show these ids: deleteClientFieldset, deleteAllClients
              and hide these ids: deletePaulsClients, deleteJunesClients, deleteSusansClients, deleteDereksClients
         }
         Then there'd be the next if statement or we could write the whole thing as a switch
    }
    Any takers?

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or . . . is there a way to trigger the showHide function from the options themselves? Similar to how I did it with the radio buttons? That would sure be a whole heck of a lot simpler!

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE doesn't support events on the option element.

    I might use a helper function with a switch() statement to call the showHide function.

    Why are you putting a semi-colon outside the value of the onchange attribute?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I get hopelessly confused about semi-colons and quotes. So is the correct syntax onchange="getOptionValues();"

    Thanks for the clarification about IE and option events.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    Yes, that's correct syntax, though, in that case, the semi-colon is optional.

    It's best to avoid using inline event handlers though.
    The Behavior Layer
    Separating behavior and structure
    Behavioral Separation
    Unobtrusive JavaScript
    DOM Scripting - Sample chapter: Best Practices
    Accessible DHTML
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •