SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Select box to trigger a function
-
Nov 4, 2006, 21:26 #1
- 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>
Code:function showHide(elementID, show) { var el = document.getElementById(elementID); if(show) { el.style.display = ''; } else { el.style.display = 'none'; } return false; }
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.
-
Nov 5, 2006, 08:31 #2
- 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)"; >
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>
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 }
-
Nov 5, 2006, 08:40 #3
- 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!
-
Nov 5, 2006, 20:40 #4
- 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.
-
Nov 6, 2006, 08:37 #5
- 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.
-
Nov 6, 2006, 19:37 #6
- 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 DHTMLWe 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