www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: Show drop down menu options depending on checkbox clicked

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    Show drop down menu options depending on checkbox clicked

    Hi everyone

    I was wondering if anyone can suggest the best way to go about the following:

    I have about 12 checkboxes. When a checkbox is click the corresponding drop down menu's appear.
    There are about 9 drop down menu options in total.

    So for example if checkbox 1 is clicked - drop down menus 1, 2, 5 and 6 appear
    if checkbox 2 is clicked - drop down menus 2, 3, 4, 5 and 6 appear and so on....

    I have done a simple show and hide div but this doesn't work as I have duplicated the drop down menu so the server side code doesn't work and no data is retrieved.

    Whats the best way to achieve this?
    if checkbox 1 is clicked - drop down menus 1, 2, 5 and 6 appear
    if checkbox 2 is clicked - drop down menus 2, 3, 4, 5 and 6 appear
    if checkbox 3 is clicked - drop down menus 1, 2, 6 and 12 appear
    if checkbox 4 is clicked - drop down menus 1, 2, 3, 4 ,5, 6 and 11 appear ...etc...

    The drop down menu are dynamic as well and I am using PHP.

    Hope someone can direct me the best way to do this?

    Many thanks

  2. #2
    Join Date
    Oct 2013
    Posts
    556
    This would be a lot easier with either a select or radio buttons instead of checkboxes. There's an example using a select (aka "dropdown") in this thread:
    http://www.webdeveloper.com/forum/sh...and-Javascript

    It could be expanded to your needs relatively easily.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb

    Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
    Modify this to your heart's content.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     select { display:none; }
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    
    <script type="text/javascript">
    function show() {
      var sbox = '';
      var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      for (var i=0; i<arguments.length; i++) {
        sbox = Number(arguments[i])-1;
        document.getElementById('SB'+sbox).style.display = 'block';
      }
    }
    </script>
    
    </body>
    </html>
    Good Luck!

  4. #4
    Join Date
    Dec 2009
    Posts
    51
    thank you so much for this I will try this later this afternoon!

    I am really sorry I was meant to say radio boxes!!!! (Yesterday was a very long day!)
    Can't believe I typed out a whole question saying check boxes instead of radio button! (you can only select one at a time - so yes definitely radio button and not checkbox! - sorry about that!)

    Thanks again I will report back!!


    Quote Originally Posted by JMRKER View Post
    Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
    Modify this to your heart's content.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     select { display:none; }
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    
    <script type="text/javascript">
    function show() {
      var sbox = '';
      var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      for (var i=0; i<arguments.length; i++) {
        sbox = Number(arguments[i])-1;
        document.getElementById('SB'+sbox).style.display = 'block';
      }
    }
    </script>
    
    </body>
    </html>
    Good Luck!

  5. #5
    Join Date
    Dec 2009
    Posts
    51
    This code has worked great!!! thank you so much.

    I have another question if you can help me further please?

    After the form is submitted how can I keep those selected drop menu options visible?

    Thanks again : )


    Quote Originally Posted by JMRKER View Post
    Yes, you can use checkboxes, but it is much cleaner to use radio buttons.
    Modify this to your heart's content.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     select { display:none; }
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <input type="radio" name="Rbtn" onclick="show(1,2,5,6)"> Items 1,2,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(2,3,4,5,6)"> Items 2,3,4,5,6 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,6,12)"> Items 1,2,6,12 <br>
    <input type="radio" name="Rbtn" onclick="show(1,2,3,4,5,6,11)"> Items 1,2,3,4,5,6,11 <br>
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    
    <script type="text/javascript">
    function show() {
      var sbox = '';
      var sel = document.getElementById('selectBoxes').getElementsByTagName('select');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      for (var i=0; i<arguments.length; i++) {
        sbox = Number(arguments[i])-1;
        document.getElementById('SB'+sbox).style.display = 'block';
      }
    }
    </script>
    
    </body>
    </html>
    Good Luck!
    Last edited by pc_mac; 02-27-2014 at 02:05 PM.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    you can do it, for example, this way

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    <style type="text/css">
    select {display:none;margin-top:5px;margin-bottom:5px;}
    </style>
    <script>
    var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
    function $(id){return document.getElementById(id);}
    
    window.onload=function(){
    var i=0,
        loc=location.search.substr(1);
    while($('r'+i)!==null){
    $('r'+i).onclick=function(){
    var index=$('predef').value=this.id.substr(1),
        arr=args[index].split(','),
        sbox='',
        sel=$('selectBoxes').getElementsByTagName('select');
    for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
    for(var s=0; s<arr.length; s++){
    var sbox=Number(arr[s])-1;
    $('SB'+sbox).style.display='block';
    }
    }
    i++;
    }
    
    $('frm').onreset=function(){$('predef').value='';}
    var preval=loc.split('&')[0].split('=')[1];
    if($('r'+preval)!==null){$('r'+preval).click();}
    }
    </script>
    </head>
    <body>
    <form name="frm" id="frm" action="">
    <input type="hidden" name="predef" id="predef" value="" />
    <input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
    <input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
    <input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
    <input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    <div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
    </form>
    </body>
    </html>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb

    Quote Originally Posted by pc_mac View Post
    This code has worked great!!! thank you so much.

    I have another question if you can help me further please?

    After the form is submitted how can I keep those selected drop menu options visible?

    Thanks again : )
    I think you would need to save the selections to a cookie or, if using HTML-5, perhaps local storage.
    I'm not sure the page retains the information after the submit occurs.

    Save current selection and set that option when page is reloaded.

  8. #8
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by JMRKER View Post
    I think you would need to save the selections to a cookie or, if using HTML-5, perhaps local storage.
    I'm not sure the page retains the information after the submit occurs.

    Save current selection and set that option when page is reloaded.
    I have used php to make sure the checkbox remains selected after the form is submitted.

    Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

    Thank you so much once again!

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Question

    Quote Originally Posted by pc_mac View Post
    I have used php to make sure the checkbox remains selected after the form is submitted.

    Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

    Thank you so much once again!
    Yes, but then you are back to your original checkbox request
    that we suggested you change to radio buttons.

    We're starting to go around in circles.

    What is it that you are REALLY trying to do?
    What do you want to use other than onclick? Clap-on, Clap-off?

  10. #10
    Join Date
    Oct 2013
    Posts
    556
    Quote Originally Posted by JMRKER View Post
    What do you want to use other than onclick? Clap-on, Clap-off?
    The Clap-on/Clap-off JavaScript events only work during the Christmas shopping season.
    Quote Originally Posted by pc_mac View Post
    Is there a way to run the function if a checkbox is checked rather than only on 'onclick'
    While you've been told that radio buttons are the real solution to your original issue, this is one way to deal with checkboxes:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>check to see if a checkbox is checked or (un)checked to be redundantly redundant</title>
    <script>
    	function cheese(el){
    	   if (el.checked == true){
    		alert("I like cheese");
    	   }else{
    		alert("I hate cheese");
    	   }
    	}
    </script>
    <body>
    <form action="">
    	<input type="checkbox" id="mycheckbox"> I like cheese<br>
    	<button onclick="cheese(mycheckbox)">Submit</button>
    </form>
    </body>
    </html>
    You can also check for unchecked by using "checked == false". More redundancy .
    Last edited by Kevin2; 02-28-2014 at 06:14 PM.

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb

    If you REALLY need a checkbox to ACT like a radio button, consider this,
    but I still don't understand the purpose.

    Code:
    <html>
    <meta charset="UTF-8">
    <head>
    <title>Radio-Box  Test</title>
    </head>
    <body>
    <h1>CBox Test</h1>
    <p />
    <input type="checkbox" name="CB" value='1'>One
    <input type="checkbox" name="CB" value='2'>Two
    <input type="checkbox" name="CB" value='3'>Three
    <input type="checkbox" name="CB" value='4'>Four
    <input type="checkbox" name="CB" value='5'>Five
    <br> <input id="Results" type="text" value="">Results
    
    <script type="text/javascript">
    function rBtnActions(info) {
      var sel = document.getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].value == info.value) { } else { sel[i].checked = false; }
      }
      var str = '';   if (info.checked) { str = info.value; }
      return str;
    }
    
    window.onload = function() {
      var sel = document.getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        sel[i].onclick = function() {  document.getElementById('Results').value = rBtnActions(this) };
      }
    }
    </script>
    
    </body>
    </html>

  12. #12
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by pc_mac View Post
    I have used php to make sure the checkbox remains selected after the form is submitted.

    Is there a way to run the function if a checkbox is checked rather than only on 'onclick'

    Thank you so much once again!
    Did you mean to write radio buttons or do you actually want a checkbox?

    I'm not sure what you're asking in your second line, onClick does just that. Are you saying to run a function to check whether a particular button is already selected when the page loads? Unless you're forcing the button or box to be checked, it'll be refreshed by the browser when the page loads. If you're storing the result in a cookie or session, then empty it and un-check the box or button.


    Quote Originally Posted by JMRKER View Post
    What do you want to use other than onclick? Clap-on, Clap-off?

  13. #13
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by JMRKER View Post
    Yes, but then you are back to your original checkbox request
    that we suggested you change to radio buttons.

    We're starting to go around in circles.

    What is it that you are REALLY trying to do?
    What do you want to use other than onclick? Clap-on, Clap-off?
    sorry everyone wow this is embarrassing - apologies once again; I don't know when I've caught this habit of typing without thinking...

    I do not mean checkbox - I mean radio button.

    Thanks so much JMRKER for helping me with the first part of the question. Padonak has kindly helped me with the 2nd part of the question and is working great!!

    Thank you for your time, patience and help I really appreciate it!

  14. #14
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by Padonak View Post
    you can do it, for example, this way

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    <style type="text/css">
    select {display:none;margin-top:5px;margin-bottom:5px;}
    </style>
    <script>
    var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
    function $(id){return document.getElementById(id);}
    
    window.onload=function(){
    var i=0,
        loc=location.search.substr(1);
    while($('r'+i)!==null){
    $('r'+i).onclick=function(){
    var index=$('predef').value=this.id.substr(1),
        arr=args[index].split(','),
        sbox='',
        sel=$('selectBoxes').getElementsByTagName('select');
    for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
    for(var s=0; s<arr.length; s++){
    var sbox=Number(arr[s])-1;
    $('SB'+sbox).style.display='block';
    }
    }
    i++;
    }
    
    $('frm').onreset=function(){$('predef').value='';}
    var preval=loc.split('&')[0].split('=')[1];
    if($('r'+preval)!==null){$('r'+preval).click();}
    }
    </script>
    </head>
    <body>
    <form name="frm" id="frm" action="">
    <input type="hidden" name="predef" id="predef" value="" />
    <input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
    <input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
    <input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
    <input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    <div><input type="submit" value="Submit" />***<input type="reset" value="Reset" /></div>
    </form>
    </body>
    </html>
    Many thanks Padonak!! Really thank you so much!

  15. #15
    Join Date
    Dec 2009
    Posts
    51
    Quote Originally Posted by Padonak View Post
    you can do it, for example, this way

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    <style type="text/css">
    select {display:none;margin-top:5px;margin-bottom:5px;}
    </style>
    <script>
    var args=['1,2,5,6','2,3,4,5,6','1,2,6,12','1,2,3,4,5,6,11'];
    function $(id){return document.getElementById(id);}
    
    window.onload=function(){
    var i=0,
        loc=location.search.substr(1);
    while($('r'+i)!==null){
    $('r'+i).onclick=function(){
    var index=$('predef').value=this.id.substr(1),
        arr=args[index].split(','),
        sbox='',
        sel=$('selectBoxes').getElementsByTagName('select');
    for(var k=0; k<sel.length; k++){sel[k].style.display='none';}
    for(var s=0; s<arr.length; s++){
    var sbox=Number(arr[s])-1;
    $('SB'+sbox).style.display='block';
    }
    }
    i++;
    }
    
    $('frm').onreset=function(){$('predef').value='';}
    var preval=loc.split('&')[0].split('=')[1];
    if($('r'+preval)!==null){$('r'+preval).click();}
    }
    </script>
    </head>
    <body>
    <form name="frm" id="frm" action="">
    <input type="hidden" name="predef" id="predef" value="" />
    <input type="radio" name="Rbtn" id="r0" /> Items 1,2,5,6 <br />
    <input type="radio" name="Rbtn" id="r1" /> Items 2,3,4,5,6 <br />
    <input type="radio" name="Rbtn" id="r2" /> Items 1,2,6,12 <br />
    <input type="radio" name="Rbtn" id="r3" /> Items 1,2,3,4,5,6,11 <br />
    <p>
    <div id="selectBoxes">
    <select id="SB0">  <option>SB00</option> <option>SB01</option> <option>SB02</option> </select>
    <select id="SB1">  <option>SB10</option> <option>SB11</option> <option>SB12</option> </select>
    <select id="SB2">  <option>SB20</option> <option>SB21</option> <option>SB22</option> </select>
    <select id="SB3">  <option>SB30</option> <option>SB31</option> <option>SB32</option> </select>
    <select id="SB4">  <option>SB40</option> <option>SB41</option> <option>SB42</option> </select>
    <select id="SB5">  <option>SB50</option> <option>SB51</option> <option>SB52</option> </select>
    <select id="SB6">  <option>SB60</option> <option>SB61</option> <option>SB62</option> </select>
    <select id="SB7">  <option>SB70</option> <option>SB71</option> <option>SB72</option> </select>
    <select id="SB8">  <option>SB80</option> <option>SB81</option> <option>SB82</option> </select>
    <select id="SB9">  <option>SB90</option> <option>SB91</option> <option>SB92</option> </select>
    <select id="SB10"> <option>SBA0</option> <option>SBA1</option> <option>SBA2</option> </select>
    <select id="SB11"> <option>SBB0</option> <option>SBB1</option> <option>SBB2</option> </select>
    </div>
    <div><input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" /></div>
    </form>
    </body>
    </html>

    Hi again Padonak

    The idea works great - but my actual form doesn't work now and no results are retrieved. I think this is due the fact that the options appear in the url...

    Is there an alternative?

    I have used PHP to keep the radio button checked after the form is submitted.

    <?php if(isset($_POST['selection1']) && $_POST['selection1'] == 'selection 1') echo ' checked="checked"';?>
    Is there a way this way?

    Thanks for you help again.
    Last edited by pc_mac; 03-01-2014 at 11:22 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles