2014-01-24 5 views
0

Я пытаюсь использовать этот код из jsfiddle (jsfiddle.net/xBxv4) для переключения форм на основе выпадающего меню, но он вообще не работает. Я попробовал переместить скрипт в HEAD, прямо перед началом FORM, прямо перед закрытием BODY и т. Д., Но он просто не выполняет переключатель. Я проверил пример кода jsfiddle, который работает с кодовой базой jQuery 1.10.2, поэтому это не проблема кода. В моем коде ниже введены некоторые функции CodeIgniter, но атрибуты HTML и id и класса определены соответствующим образом.формы не включают выбор

Любые идеи, почему моя форма не включает выбор?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<title>add property</title> 

    <!-- Loading: jQuery --> 
    <script src="assets/js/jquery-1.10.2.min.js" type="text/javascript" language="Javascript"></script> 
    <script src="assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" language="Javascript"></script> 

    <!-- Loading, Setting Up: Form, Form Validation Plugin --> 
    <script src="assets/js/jquery.form.min.js" type="text/javascript" language="Javascript"></script> 
    <script src="assets/js/jquery.validate.min.js" type="text/javascript" language="Javascript"></script> 
    <script src="assets/js/jquery.validation.settings.js" type="text/javascript" language="Javascript"></script> 

    <!-- Loading: Respond.js (Old IE Media Queries) --> 
    <!-- Note: Respond.js only understands min-width/max-width media queries --> 
    <script src="assets/js/respond.min.js" type="text/javascript" language="Javascript"></script> 

    <style type="text/css"> 
     .hidden { 
      display: none; 
     } 
    </style> 

</head> 

<body> 

    <h2>add a property</h2> 

    <?if($this->session->flashdata('flashError')):?> 
    <div class='flashError'> 
     <?=$this->session->flashdata('flashError')?> 
    </div> 
    <?endif?> 

    <script type="text/javascript" language="Javascript"> 
    $('#property_campaign').on('change', function() { 
     var val = $(this).val(); 
     $('#forsale_form').hide(); 
     $('#forrent_form').hide(); 
     $('#foreclosure_form').hide(); 
     $('#portfolio_form').hide(); 
     $('#undeveloped_form').hide(); 
     $('#' + val).show(); 
    }); 
    </script> 

    <div id="addproperty_form_wrapper"> 

     <?=form_open(base_url().'/admin/property/add', array('id'=>'picker_form','class'=>'picker_form'))?> 
      <p><span>*</span> = required field</p> 
      <ul> 
       <li> 
        <label>property name <span>*</span></label> 
        <?=form_input('property_name', set_value('property_name'), 'id="property_name"')?> 
        <?=form_error('property_name')?> 
       </li> 
       <li> 
        <label>campaign <span>*</span></label> 
        <?=form_dropdown('property_campaign', array('forsale' => 'for sale', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'portfolio' => 'portfolio', 'undeveloped' => 'undeveloped'), set_value('property_campaign'), 'id="property_campaign"')?> 
        <?=form_error('property_campaign')?> 
       </li> 
      </ul> 
     <?=form_close()?> 

     <!-- add for sale property form --> 
     <div id="forsale_formwrapper"> 
      <?=form_open(base_url().'/admin/property/add', array('id'=>'forsale_form','class'=>'hidden'))?> 
       <h1>add a for sale property</h1> 
       <ul> 
        <li> 
         <label>property's asking price <span>*</span></label> 
         <?=form_input('property_askingprice', set_value('property_askingprice'), 'id="property_askingprice"')?> 
         <?=form_error('property_askingprice')?> 
        </li> 
        <li> 
         <label>property's blurb <span>*</span></label> 
         <?=form_textarea('property_blurb', set_value('property_blurb'),'id="property_blurb"')?> 
         <?=form_error('property_blurb')?> 
        </li> 
        <li> 
         <label>property manager <span>*</span></label> 
         <?=form_dropdown('manager_id', array('989' => 'Michael Smith', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'undeveloped' => 'undeveloped'), set_value('manager_id'))?> 
         <?=form_error('property_manager')?> 
        </li> 
        <li> 
         <label>property template <span>*</span></label> 
         <?=form_dropdown('template_id', array('9' => 'property X', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'undeveloped' => 'undeveloped'), set_value('template_id'))?> 
         <?=form_error('property_template')?> 
        </li> 
        <li> 
         <?=form_reset('reset_form','reset')?> 
         <?=form_submit('add_forsaleproperty','add forsaleproperty','id="add_forsaleproperty"')?> 
        </li> 
       </ul> 
      <?=form_close()?> 
     </div> 

     <!-- add parked property form --> 
     <div id="forrent_formwrapper"> 
      <?=form_open(base_url().'/admin/property/add', array('id'=>'forrent_form','class'=>'hidden'))?> 
       <h1>add a parked property</h1> 
       <ul> 
        <li> 
         <label>parked property stuff <span>*</span></label> 
         <?=form_textarea('property_parkedstuff', set_value('property_parkedstuff'),'id="property_parkedstuff"')?> 
         <?=form_error('property_parkedstuff')?> 
        </li> 
        <li> 
         <?=form_reset('reset_form','reset')?> 
         <?=form_submit('add_parkedproperty','add parkedproperty','id="add_parkedproperty"')?> 
        </li> 
       </ul> 
      <?=form_close()?> 
     </div> 

     <!-- add mini-site property form --> 
     <div id="foreclosure_formwrapper"> 
      <?=form_open(base_url().'/admin/property/add', array('id'=>'foreclosure_form','class'=>'hidden'))?> 
       <h1>add a foreclosure property</h1> 
       <ul> 
        <li> 
         <label>foreclosure property stuff <span>*</span></label> 
         <?=form_textarea('property_foreclosurestuff', set_value('property_foreclosurestuff'),'id="property_foreclosurestuff"')?> 
         <?=form_error('property_foreclosurestuff')?> 
        </li> 
        <li> 
         <?=form_reset('reset_form','reset')?> 
         <?=form_submit('add_foreclosureproperty','add foreclosureproperty','id="add_foreclosureproperty"')?> 
        </li> 
       </ul> 
      <?=form_close()?>   
     </div> 

     <!-- add portfolio property form --> 
     <div id="portfolio_formwrapper"> 
      <?=form_open(base_url().'/admin/property/add', array('id'=>'portfolio_form','class'=>'hidden'))?> 
       <h1>add an portfolio property</h1> 
       <ul> 
        <li> 
         <label>portfolio property stuff <span>*</span></label> 
         <?=form_textarea('property_portfoliostuff', set_value('property_portfoliostuff'),'id="property_portfoliostuff"')?> 
         <?=form_error('property_portfoliostuff')?> 
        </li> 
        <li> 
         <?=form_reset('reset_form','reset')?> 
         <?=form_submit('add_portfolioproperty','add portfolioproperty','id="add_portfolioproperty"')?> 
        </li> 
       </ul> 
      <?=form_close()?>  
     </div> 

     <!-- add undeveloped property form --> 
     <div id="undeveloped_formwrapper"> 
      <?=form_open(base_url().'/admin/property/add', array('id'=>'undeveloped_form','class'=>'hidden'))?> 
       <h1>add an undeveloped property</h1> 
       <ul> 
        <li> 
         <label>undeveloped property stuff <span>*</span></label> 
         <?=form_textarea('property_undevelopedstuff', set_value('property_undevelopedstuff'),'id="property_undevelopedstuff"')?> 
         <?=form_error('property_undevelopedstuff')?> 
        </li> 
        <li> 
         <?=form_reset('reset_form','reset')?> 
         <?=form_submit('add_undevelopedproperty','add undevelopedproperty','id="add_undevelopedproperty"')?> 
        </li> 
       </ul> 
      <?=form_close()?>   
     </div> 

    </div> 

</body> 

ответ

1

Похоже, две проблемы. Во-первых, поставить свой код в йот готовый обработчик, так что вы можете быть уверены, что элемент существует:

$(document).ready(function() { 
    $('#property_campaign').on('change', function() { 
     var val = $(this).val(); 
     $('#forsale_form').hide(); 
     $('#forrent_form').hide(); 
     $('#foreclosure_form').hide(); 
     $('#portfolio_form').hide(); 
     $('#undeveloped_form').hide(); 
     $('#' + val).show(); 
    }); 
}); 

Во-вторых, это выглядит, как у вас есть выпадающий список с (например) в option со значением forsale. В вашем яваскрипте функции, вы делаете это:

$('#forsale_form').hide(); 

Но затем использовать значение, чтобы показать ту же форму, но значение forsale, так

$('#' + val).show(); 

становится:

$('#forsale').show(); 

Который не существует. Таким образом, вы можете либо изменить свой раскрывающийся список, чтобы иметь правильные значения, либо изменить свой javascript на это:

$('#' + val + '_form').show(); 
+0

Спасибо, благодарю вас! Работал как шарм. Ты только что закончил 8 дней страданий для меня. Очень признателен. – crashintoty

Смежные вопросы