How to create forms with conditional options

Question

How to create forms with conditional options

2.3k views Asked by Perkin5 At 10 January 2012 at 17:20

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.

Original Q&A

There are 3 answers

Ashley Banks On 10 January 2012 at 17:25

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

DamirR On 10 January 2012 at 19:04

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') ));
}

**Andrew HunzekerHesed** · Accepted Answer · 2012-01-10 17:26:02

Andrew HunzekerHesed On 10 January 2012 at 17:26 BEST ANSWER

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.

TechQA.

How to create forms with conditional options

There are 3 answers

Related Questions in PHP

Related Questions in CODEIGNITER-FORM-HELPER

Popular Questions

Popular Tags

Trending Questions