Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Is it possible to load a certain select menu depending on which checkbox is checked?

    Hi, I have been trying to find an answer to this, but have had no luck.

    Is it possible to load a certain select menu depending on which checkbox is checked?

    The idea is to have 2 checkboxes, 1 labelled Tropical Fish and 1 labelled Marine Fish. If someone clicks on the checkbox for Tropical Fish I would like a select menu to display a list of tropical fish. If someone clicks the marine Fish checkbox, then the select menu should display a list of marine fish.

    If this is possible, could someone please point me in the right direction

    Thanks

    Aquaman

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Easy enough:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="fishForm">
    <input type="radio" name="fishtype" value="marine" /> Marine fish
    <input type="radio" name="fishtype" value="tropical" /> Tropical fish
    <br/>
    <select name="speciesChoice">
       <option value="">--choose one--</option>
    </select>
    </form>
    
    
    <script type="text/javascript">
    var form = document.getElementById("fishForm");
    form.fishtype[0].onclick = changeType;
    form.fishtype[1].onclick = changeType;
    
    var species = {
        marine : [ "tuna", "grouper", "halibut" ],
        tropical : [ "tetra", "guppy", "zebra" ]
    };
    
    function changeType( )
    {
        var which = species[this.value];
        var sel = form.speciesChoice;
        sel.options.length = 1;
        for ( var s = 0; s < which.length; ++s )
        {
            sel.options[s+1] = new Option( which[s], which[s] );
        }
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    aquaman (06-10-2013)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts
    wow thank you Old Pedant, you are indeed a supreme master coder!

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Exclamation

    Hi Old Pedant, was wondering if you could help with this. As I have decided to add stuff such as Frogs, Shrimp, Crabs etc, I realised I would end up with too many checkboxes, so thought it would be best to use a select menu.

    So this is what I got:

    Code:
    <label for="fishtype">Family *</label>
    <select name="fishtype">
       <option value="">--choose one--</option>
       <option name="fishtype" value="cichlids">Cichlids</option>
       <option name="fishtype" value="tropical">Tropical Fish</option>
       <option  value="marine">Marine Fish</option>
    
       </select>
    
    			</li>
    			<li>
    <label for="speciesChoice">Common Name *</label>
    <select name="speciesChoice">
       <option value="">--choose one--</option>
    </select>
    
    
    
    <script type="text/javascript">
    var form = document.getElementById("careGuideSubmit");
    form.fishtype[0].onchange = changeType;
    form.fishtype[1].onchange = changeType;
    form.fishtype[2].onchange = changeType;
    form.fishtype[3].onchange = changeType;
    However this no longer generates the speciesChoice menu. I did change the onclick to onchange, but this doesent work either. Im sure its something very simple, but im not very familiar with Javascript, so your help is very much appreciated.

    Thanks

    Paul
    Last edited by aquaman; 06-16-2013 at 08:52 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Wrong:
    form.fishtype[0].onchange = changeType;

    Right:
    form.fishtype.onchange = changeType;

    You would only use fishtype[0] (etc.) if you had many <select>s all with that name. In the case of radio buttons and checkboxes, that's exactly what you have. With a single <select>, there is only one form field, so you only need the one onchange.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    aquaman (06-16-2013)

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts
    You truly are a genius. Many thanks

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Quote Originally Posted by aquaman View Post
    You truly are a genius.
    Ummm...if I am, then most coders here are. Really, this is just the result of coding for many years, not genius of any kind.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    aquaman (06-17-2013)

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Exclamation

    Hi Old Pedant, I got another idea, but I think it will mean altering the code you have already surprised. I have tried playing about with the code, and been googling for a solution, but have come up blank again.

    What I am looking for is, once the Family has been selected, the relevant menu for Common Name is loaded, this all works great. But what if, once someone has selected the Common Name, the scientific name is automatically selected in the next dropdown menu named Scientific Name.

    So the form would look like this

    Code:
    	<fieldset id="Care Guide Step 1" class="hidden" title="Care Guide Step 1">
    		<legend>Care Guide Step 1</legend>
    			<ol>
    			<li>
    				<label for="fishtype">Family *</label>
    <select name="fishtype">
       <option value="">--choose one--</option>
       <option value="cichlids">Cichlids</option>
       <option value="tropical">Tropical Fish</option>
       <option value="tropicalShrimp">Tropical Shrimp</option>
       <option value="tropicalFrogs">Tropical Frogs</option>
       <option value="tropicalSnails">Tropical Snails</option>
       <option value="marine">Marine Fish</option>
       <option value="marineShrimp">Marine Shrimp</option>
       <option value="marineSnails">Marine Snails</option>
    </select>
    
    			</li>
    			
    						<li>
    <label for="speciesChoice">Common Name *</label>
    <select name="speciesChoice">
       <option value="">--choose one--</option>
       <option value="">Clown Loach</option> ///// EXAMPLE /////
    
    </select>
    </li>
    
    			<li>
    <label for="speciesName">Species Name *</label>
    <select name="speciesName">
       <option value="">chromobotia macracanthus</option>//// EXAMPLE - This should be autoselected once the common name has been chosen ////
    </select>
    I just cant seem to get it right and dont want to mess up the code you have already supplied lol
    Last edited by aquaman; 06-17-2013 at 03:13 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    How about let's just rewrite the whole thing, adding in common/scientific names?

    I'll bet you can guess that I'm not an ichthyologist!
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="fishForm">
    <select name="fishtype">
        <option value="none">--choose--</option>
        <option value="marine"> Marine fish</option>
        <option value="tropical"> Tropical fish</option>
    </select>
    <br/>
    <select name="speciesCommon">
       <option value="">--choose one--</option>
    </select>
    <select name="speciesScientific">
       <option value="">--choose one--</option>
    </select>
    </form>
    
    
    <script type="text/javascript">
    var form = document.getElementById("fishForm");
    form.fishtype.onchange = changeType;
    form.speciesCommon.onchange     = changeSpecies;
    form.speciesScientific.onchange = changeSpecies;
    
    
    var species = {
        none : { common: [ ], scientific: [ ] },
        marine : {
            common: [ "tuna", "halibut" ],
            scientific: [ "aquatia fowlis", "ocularis topsidis" ]
            },
        tropical : {
            common : [ "tetra", "clown loach" ],
            scientific : [ "neonius flashius", "chromobotia macracanthus" ]
            }
    };
    
    function changeType( )
    {
        var which = species[this.value];
        var com = which.common;
        var sci = which.scientific;
    
        var selcom = form.speciesCommon;
        var selsci = form.speciesScientific;
    
        selcom.options.length = 1;
        selsci.options.length = 1;
        for ( var s = 0; s < com.length; ++s )
        {
            selcom.options[s+1] = new Option( com[s], com[s] );
            selsci.options[s+1] = new Option( sci[s], sci[s] );
        }
    }
    
    function changeSpecies( )
    {
        var selix = this.selectedIndex;
        form.speciesCommon.selectedIndex = selix;
        form.speciesScientific.selectedIndex = selix;
    }
    </script>
    </body>
    </html>
    p.s.: Did you get the joke of my scientific name for "tuna"?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    I can see that it might be a pain to make sure that the parallel arrays of common/scientific names are always in sync.

    So if you would prefer, we could use a single array with both names in one array element, separated by a delimiter. I used "::" here, but you could use any delimiter you want that isn't found in the names.
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="fishForm">
    <select name="fishtype">
        <option value="none">--choose--</option>
        <option value="marine"> Marine fish</option>
        <option value="tropical"> Tropical fish</option>
    </select>
    <br/>
    <select name="speciesCommon">
       <option value="">--choose one--</option>
    </select>
    <select name="speciesScientific">
       <option value="">--choose one--</option>
    </select>
    </form>
    
    
    <script type="text/javascript">
    var form = document.getElementById("fishForm");
    form.fishtype.onchange = changeType;
    form.speciesCommon.onchange     = changeSpecies;
    form.speciesScientific.onchange = changeSpecies;
    
    
    var species = {
        none     : [ ],
        marine   : [ "tuna::aquatia fowlis domesticatus", 
                     "halibut::ocularis topsidis" ],
        tropical : [ "tetra::neonius flashius", 
                     "clown loach::chromobotia macracanthus" ]
    };
    
    function changeType( )
    {
        var which = species[this.value];
    
        var selcom = form.speciesCommon;
        var selsci = form.speciesScientific;
    
        selcom.options.length = 1;
        selsci.options.length = 1;
        for ( var s = 0; s < which.length; ++s )
        {
            var names = which[s].split("::");
    
            selcom.options[s+1] = new Option( names[0], names[0] );
            selsci.options[s+1] = new Option( names[1], names[1] );
        }
    }
    
    function changeSpecies( )
    {
        var selix = this.selectedIndex;
        form.speciesCommon.selectedIndex = selix;
        form.speciesScientific.selectedIndex = selix;
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    aquaman (06-17-2013)

  • #11
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Smile

    Thank you ever so much, I am more familiar with PHP, and have just been learning jquery for form validation, but I didnt know where to start with any of this. Yes I got the tuna joke lol. I just wish I thought of this before I collected a list of common names only, I just got to go through and find the scientific names now. Yes I prefer the second script, it looks like a lot easier

    Many Thanks

    Paul

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Fixed
    Last edited by aquaman; 06-18-2013 at 09:32 PM.

  • #13
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Exclamation

    Hi, this is turning out to be one huge script as I am listing Cichlids, Tropical Fish, Tropical Shrimp, Tropical Frogs, Tropical Snails, Marine Fish etc. Is it possible to include this as an external file, so the html form is on one page and the javascript file is an external file? If so how would I do this?

    Thanks

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Quote Originally Posted by aquaman View Post
    Hi, this is turning out to be one huge script as I am listing Cichlids, Tropical Fish, Tropical Shrimp, Tropical Frogs, Tropical Snails, Marine Fish etc. Is it possible to include this as an external file, so the html form is on one page and the javascript file is an external file? If so how would I do this?

    Thanks
    Using post #10 as the example, try this...

    External 'Species.js" file (removed from HTML file)
    Code:
    var species = {
        none     : [ ],
        marine   : [ "tuna::aquatia fowlis domesticatus", 
                     "halibut::ocularis topsidis" ],
        tropical : [ "tetra::neonius flashius", 
                     "clown loach::chromobotia macracanthus" ]
    };
    Then in the <head> section, reference the 'Species.js' file with
    Code:
    <script type="text/javascript" src="Species.js"></script>

  • Users who have thanked jmrker for this post:

    aquaman (06-19-2013)

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Just take *ALL* the JavaScript and put it into a separate file. Say you name it "fishystuff.js".

    Then remove all that JS from the HTML page.

    Then add back in, *JUST* before the </body> tag:
    Code:
    <script type="text/javascript" src="fishystuff.js"></script>
    Remember: *INSIDE* a ".js" file you do *NOT* use <script>...</script> tags.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    aquaman (06-19-2013)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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