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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Keep drop down menus visible after form is submitted

    Hi everyone

    I was wondering if anyone help me?

    I have a form that starts off with just 12 radio buttons; once this is selected the second part of the form appears depending on what radio button is selected.
    The second part of the form are a selection of drop down menus. There are a total of 20 drop down menus but not all of them appear.
    So for a example if radio button is selected only drop menus 1, 4 ,5 and 6 appear. If radio button 2 is selected only drop down menus 1,5 6, 7,8 and 10 appear and so on.

    I have this part of the form working but the issue is after the form is submitted I need the second part of the form (the drop down menus) to stay visible.

    Also I think is worth mentioning is that its not mandatory for the user to select an option for each drop menu - so for example if radio button is selected and drop down menus 1,4,5 and 6 appear - the user can select a value from drop menu 1 and 6 and leave 4 and 5 (hope that makes sense!)

    The form is working and retrieving data from the database - I just need the drop down menu to stay visible after the form is submitted.

    I hope someone can help me?
    Here is my code so far (I haven't put all the radio buttons and drop down menus as I thought this will be enough)


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>form</title>
    <style type="text/css">
    select {
    	display: none;
    	margin-top: 5px;
    	margin-bottom: 5px;
    }
    </style>
    <script type="text/javascript">
    
    function show() {
     var chboxs = document.getElementsByName("radio_select");
        var vis = "none";
        for(var i=0;i<chboxs.length;i++) { 
            if(chboxs[i].checked){
             vis = "block";
                break;
            }
        }
        document.getElementById("dpoptions").style.display = vis;
      var sbox = '';
      var sel = document.getElementById('dpoptions').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('OP'+sbox).style.display = 'block';
      }
    }
    </script>
    </head>
    <body>
    <div id="main-form" class="main-form">
      <h1>Form part 1</h1>
      <form id="form" method="post">
        <label>
          <input  type="radio" name="radio_select" onclick="show(1,2,6)" id="RadioGroup1_0" />
          button 1 </label>
        <br />
        <label>
          <input type="radio" name="radio_select"  onclick="show(1,2,3,4,5,6)" id="RadioGroup1_1" />
          button 2</label>
        <br />
        <label>
          <input  type="radio" name="radio_select" onclick="show(1,4,5,6)" id="RadioGroup1_2" />
          button 3 </label>
        <br>
        <label>
          <input type="radio" name="radio_select" onclick="show(2,4,5,6)" id="RadioGroup1_3" />
          button 4</label>
        <div class="clear"></div>
        <div id="dpoptions" style="display:none">
          <h1>Form part 2.</h1>
          <select id="OP0" name="option 1">
            <option value="">drop down menu 1</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
          </select>
          <select id="OP1" name="option 2">
            <option value="">drop down menu 2</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP2" name="option 3">
            <option value="">drop down menu 3</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP3" name="option 4">
            <option value="">drop down menu 4</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP4" name="option 5">
            <option value="">drop down menu 5</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP5" name="option 6">
            <option value="">drop down menu 6</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <input type="submit" class="button" name="button" id="button" />
        </div>
      </form>
    </div>
    </body>
    </html>
    Last edited by dips045; 03-02-2014 at 10:46 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Keeping the value selected in a form drop down is hard. It uses javascript AND php. It also needs the php to be part of the file that has the form . Here is an example using one of your dropdowns:
    Code:
    <?php
    if(isset($_GET['option2'])){
    	$option2 = $_GET["option2"];
    }else{
    	$option2 = "";
    }
    ?>
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    
    <body>
    <form method="get" action="#">
          <select id="OP1" name="option2">
            <option value="">drop down menu 2</option>
            <option value="option1" <?php if($option2 == "option1") echo "selected"; ?>>option 1</option>
            <option value="option2" <?php if($option2 == "option2") echo "selected"; ?>>option 2</option>
            <option value="option3" <?php if($option2 == "option3") echo "selected"; ?>>option 3</option>
          </select>
       <input type="submit" value="Submit" class="submit" />
    </form>
    
    </body>
    </html>
    Add to this the complexity of reiterating your JS to make the bottom half visible and you can see this is becoming, maybe, impossible.

    Then you say
    I haven't put all the radio buttons and drop down menus....
    My suggestion is to rethink this.
    Maybe have the first group of choices open another page? Or a pop up? or using ajax, put the next set of choices appear under the radio button and fade the others out.

    Anyway, rethink this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi

    thank you so much for responding. Sorry, I don't think I have explained myself properly

    When you submit the form all of the drop down menus disappear as they are displayed as 'none' to start off with.
    When you select a radio button the corresponding drop down menus appear, but when you submit the form they disappear and I'm not sure the best way to keep them visible.

    I hope that makes sense. I don't need the drop down menu value selected - I just need the drop down menus visible after form is submitted.
    Any ideas?

    Quote Originally Posted by sunfighter View Post
    Keeping the value selected in a form drop down is hard. It uses javascript AND php. It also needs the php to be part of the file that has the form . Here is an example using one of your dropdowns:
    Code:
    <?php
    if(isset($_GET['option2'])){
    	$option2 = $_GET["option2"];
    }else{
    	$option2 = "";
    }
    ?>
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    
    <body>
    <form method="get" action="#">
          <select id="OP1" name="option2">
            <option value="">drop down menu 2</option>
            <option value="option1" <?php if($option2 == "option1") echo "selected"; ?>>option 1</option>
            <option value="option2" <?php if($option2 == "option2") echo "selected"; ?>>option 2</option>
            <option value="option3" <?php if($option2 == "option3") echo "selected"; ?>>option 3</option>
          </select>
       <input type="submit" value="Submit" class="submit" />
    </form>
    
    </body>
    </html>
    Add to this the complexity of reiterating your JS to make the bottom half visible and you can see this is becoming, maybe, impossible.

    Then you say
    My suggestion is to rethink this.
    Maybe have the first group of choices open another page? Or a pop up? or using ajax, put the next set of choices appear under the radio button and fade the others out.

    Anyway, rethink this.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    So when the form is submitted, it submits to itself and the server-side code is already in place to re-check the selected radio button? If so, then you just need to trigger the click() event for the selected radio button after the form is submitted.
    Code:
    var chboxs = document.getElementsByName("radio_select");
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            chboxs[i].click();
        }
    }
    You can actually shorten it to (if you don't care about IE7 which I assume you don't):
    Code:
    var chbox = document.querySelector('input[name=radio_select][checked]');
    if (chbox) {
        chbox.click();
    }

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm not sure this will work in the way I want it to.

    I'll try explaining again - or if there's somewhere I can post my code to see a live demo of my code posted above? it might be a bit clear.

    When the 1st radio button is clicked - this div appears :

    Code:
    <div id="dpoptions" style="display:none">
          <h1>Form part 2.</h1>
          <select id="OP0" name="option 1">
            <option value="">drop down menu 1</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
          </select>
          <select id="OP1" name="option 2">
            <option value="">drop down menu 2</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP2" name="option 3">
            <option value="">drop down menu 3</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP3" name="option 4">
            <option value="">drop down menu 4</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP4" name="option 5">
            <option value="">drop down menu 5</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <select id="OP5" name="option 6">
            <option value="">drop down menu 6</option>
            <option value="option 1">option 1</option>
            <option value="option 2">option 2</option>
            <option value="option 3">option 3</option>
          </select>
          <input type="submit" class="button" name="button" id="button" />
        </div>
    But only drop down menu's "OP1, OP2 and OP6" appear, the rest are displayed as none. (I have this bit working fine as shown in the full code posted above in my 1st post)

    When the user submits the form, the data is retrieved from the database (all my server side code is working) but the three drop down menu options disappear.
    How can I keep those three drop down menus visible after the form is submitted? I'm not sure the best way to achieve this - any ideas? I need to happen for each radio button selected.

    This is my javascript code so show the correct drop down menus when a radio button is selected.

    Code:
    <script type="text/javascript">
    
    function show() {
     var chboxs = document.getElementsByName("radio_select");
        var vis = "none";
        for(var i=0;i<chboxs.length;i++) { 
            if(chboxs[i].checked){
             vis = "block";
                break;
            }
        }
        document.getElementById("dpoptions").style.display = vis;
      var sbox = '';
      var sel = document.getElementById('dpoptions').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('OP'+sbox).style.display = 'block';
      }
    }
    </script>
    The radio button remains selected after the form is submitted using PHP.

    I hope you can help me I can't find the best solution anywhere
    Last edited by dips045; 03-05-2014 at 10:56 PM.


  •  

    Posting Permissions

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