Results 1 to 2 of 2

Thread: Chained Menu go without go button

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chained Menu go without go button

    1) Script Title: Chained Menu go with out go button

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ects/index.htm

    3) Describe problem: Great Script and I have everything working as planned, but now I would like to have the go button not show up until the last option is choose or once the last option is choose then have it goto a new page.

    Thanks

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can forgo the "Go" button and have the menu respond as soon as the last select menu is selected by the user with the following. Using the default HTML code of the demo page:

    Code:
    <body onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')">
    
    <form name="listmenu0">
    <table align="center"><tr>
    <td><select name="firstlevel" style="width:180px;"></select></td>
    <td><select name="secondlevel" style="width:160px;"></select></td>
    <td><select name="thirdlevel" style="width:160px;"></select></td>
    <td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">
     <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')">
    </tr></table>
    </form>
    You'd add to it (following the above code) the below:
    Code:
    <script type="text/javascript">
    
    function ddaddEvent(target, functionref, tasktype){
    	if (target.addEventListener)
    		target.addEventListener(tasktype, functionref, false);
    	else if (target.attachEvent)
    		target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
    }
    
    ddaddEvent(document.listmenu0.thirdlevel, function(){
    	goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)
    	}, "change")
    
    </script>
    Make sure the lines in red match the information within the original HTML code above it. With the extra code, the 3rd select menu reacts as soon as a choice has been selected within it, without having to click on the "go" button.
    DD Admin

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
  •