How to create forms with conditional options

StackOverflow https://stackoverflow.com/questions/8808967

  •  15-04-2021
  •  | 
  •  

Question

I want to create a form with two dropdown boxes so that the options in the second dropdown depend on the choices in the first dropdown. So Dropdown1 might ask the user to opt for CourseA or CourseB and Dropdown2 might present sets of dates - but the dates would differ depending on what the choice in Dropdown1 had been.

I have tried using the post array to set the Dropdown2 choices but then realized that it is not set until the form is submitted. My problem happens before the form is submitted.

Can anyone suggest a way of doing this? I'm using codeigniter but think that this is a php rather than a codeigniter issue.

Était-ce utile?

La solution

You need to make an asynchronous call to the server once the first drop down is selected. Javascript is going to be your answer. I am not sure if CodeIgnitor will do it natively, but a framework like J-query will probably get you there the quickest.

Autres conseils

Here is complete solution with jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript">
  /*<![CDATA[*/
  function populateSel2()
  {
    $.post( 'formsel2.php',
           {sel1: $('#sel1').val()},
           function(data)
           {
            var sel2 = $('#sel2');
            var o=jQuery.parseJSON(data);

            sel2.children().remove();

            var l=o.length;
            for(var i=0; i<l; i++)
              sel2.append('<option value="'+o[i].val+'">'+o[i].txt+'<'+'/option>');
           }
          );
  }

  $(document).ready( function()
            {
            $('#sel1').change( populateSel2 );
            populateSel2();
            } );
  /*]]>*/
  </script>

</head>
<body>
  <form method="post" action="#">
    <fieldset>
      <select name="sel1" id="sel1">
        <option value="">-= Select =-</option>
        <option value="1">Val 1</option>
        <option value="2">Val 2</option>
      </select>
    </fieldset>
    <fieldset>
      <select name="sel2" id="sel2">
        <option value="">Select first option</option>
      </select>
    </fieldset>
  </form>
</body>
</html>

formsel2.php:

<?php

if(empty($_POST['sel1']))
{
  echo json_encode(array( array('val'=> '', 'txt' => 'Select first option') ) );
}
else if($_POST['sel1']=='1')
{
  echo json_encode(array( array('val'=> 'A_1', 'txt' => 'Option A#1') , array('val'=> 'A_2', 'txt' => 'Option A#2'), array('val'=> 'A_3', 'txt' => 'Option A#3') ));
}
else
{
  echo json_encode(array( array('val'=> 'B_1', 'txt' => 'Option B#1') , array('val'=> 'B_2', 'txt' => 'Option B#2'), array('val'=> 'B_3', 'txt' => 'Option B#3') ));
}

The solution will be to use AJAX.

Upon changing your first select menu, you want your javascript to query a server side script through (easiest way) jQuery method POST, that queries your database to then return the select menu options.

jQuery Post

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top