Как создавать формы с условными параметрами - PullRequest
Новая
       5

Как создавать формы с условными параметрами

1 голос
/ 10 января 2012

Я хочу создать форму с двумя раскрывающимися списками, чтобы параметры во втором раскрывающемся списке зависели от вариантов в первом раскрывающемся списке.Таким образом, Dropdown1 может попросить пользователя выбрать CourseA или CourseB, а Dropdown2 может представить наборы дат - но даты будут отличаться в зависимости от того, какой выбор был в Dropdown1.Dropdown2, но затем понял, что он не установлен, пока форма не будет отправлена.Моя проблема возникает до отправки формы.

Может кто-нибудь предложить способ сделать это?Я использую codeigniter, но думаю, что это php, а не проблема codeigniter.

Ответы [ 3 ]

1 голос
/ 10 января 2012

Вам нужно сделать асинхронный вызов на сервер после выбора первого раскрывающегося списка. Javascript будет вашим ответом. Я не уверен, будет ли CodeIgnitor делать это изначально, но фреймворк, такой как J-query, вероятно, поможет вам быстрее.

0 голосов
/ 10 января 2012

Вот полное решение с 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') ));
}
0 голосов
/ 10 января 2012

Решением будет использование AJAX.

После изменения вашего первого меню выбора вы хотите, чтобы ваш javascript запрашивал скрипт на стороне сервера через (самый простой способ) метод jQuery POST, который запрашивает вашу базу данных, чтобы затем вернуть опции меню выбора.

JQuery Post

...