I have a page on which I have broken it down into several forms, which relate to specific categories applied to an awards contest for students. At the top of the page, I have a select list which, when a category is selected, I want it to show a particular div and the form it contains and hide the rest of the forms, all in divs with an ID. I am using jquery-1.4.2
Here is the select list code:
<form id="chooseCat" name="chooseCat" method="post" action="">
<fieldset>
<legend>To view the proper entry form, choose a category</legend>
<select name="chooseCat" id="chooseCat">
<option value="video documentary">Video: Documentary</option>
<option value="video drama">Video: Drama</option>
<option value="video comedy">Video: Comedy</option>
<option value="video serial or special">Video: Series or Special</option>
<option value="video studio newscast">Video Studio Newscast</option>
<option value="video music">Video: Music</option>
<option value="video corporate or PSA short">Video Corporate or PSA, Short</option>
<option value="video ENG news story">Video: ENG News Story</option>
<option value="video animation">Video: Animation</option>
<option value="video commercial or promo">Video: Comercial or Promo</option>
<option value="web design">Web Design</option>
<option value="audio drama">Audio: Drama</option>
<option value="audio comedy">Audio Comedy</option>
<option value="audio spot news">Audio: Spot News </option>
<option value="audio commercial">Audio: Commercial</option>
<option value="audio promotion">Audio: Promotion</option>
<option value="audio PSA">Audio: PSA</option>
</select>
</fieldset>
</form>And here is code for a couple of the forms:
<div class="turnOn" id="documentary">
<form class="clean" id="vid_doc">
<ol>
<li>
<fieldset>
<legend>Video Documentary</legend>
<ol>
<li>
<label for="runtime">Run Time</label>
<input type="text" id="runtime" name="runtime" value="" />
</li>
<li>
<label for="title">Production Title</label>
<input type="text" id="title" name="title" value="" />
</li>
<li>
<label for="main_student_producer">Main Student Producer's Name</label>
<input type="text" id="main_student_producer" name="main_student_producer" value="" />
</li>
<li>
<label for="main_student_prod_email">Main Student Producer's Email</label>
<input type="text" id="main_student_prod_email" name="main_student_prod_email" value="" />
</li>
<li>
<label for="second_producer">Second Producer</label>
<input type="text" id="second_producer" name="second_producer" value="" />
</li>
<li>
<label for="second_producer_email">Second Producers Email</label>
<input type="text" id="second_producer_email" name="second_producer_email" value="" />
</li>
<li>
<label for="third_producer">Third Producer</label>
<input type="text" id="third_producer" name="third_producer" value="" />
</li>
<li>
<label for="third_producer_email">Third Producer's Email</label>
<input type="text" id="third_producer_email" name="third_producer_email" value="" />
</li>
<li>
<label for="fourth_producer">Fourth Producer</label>
<input type="text" id="fourth_producer" name="fourth_producer" value="" />
</li>
<li>
<label for="fourth_producer_email">Fourth Producer's Email</label>
<input type="text" id="fourth_producer_email" name="fourth_producer_email" value="" />
</li>
<li>
<label for="synopsis">Brief Synopsis of the Production</label>
<textarea name="synopsis" rows="6" id="synopsis"></textarea>
</li>
<li>
<label for="institution">Name of Institution</label>
<input type="text" id="institution" name="institution" value="" />
</li>
<li>
<label for="program">Program</label>
<input type="text" id="program" name="program" value="" />
</li>
<li>
<label for="faculty_contact">Faculty or School Contact</label>
<input type="text" id="faculty_contact" name="faculty_contact" value="" />
</li>
<li>
<label for="faculty_email">Faculty Email</label>
<input type="text" id="faculty_email" name="faculty_email" value="" />
</li>
</ol>
</fieldset>
</li>
</ol>
<p style="text-align:right;">
<input type="reset" value="CANCEL" />
<input type="submit" value="OK" />
</p>
</form>
</div><!-- end Documentary -->
<div class="turnOff" id="drama" >
<form class="clean" id="vid_drama">
<ol>
<li>
<fieldset>
<legend>Video Drama</legend>
<ol>
<li>
<label for="runtime">Run Time</label>
<input type="text" id="runtime" name="runtime" value="" />
</li>
<li>
<label for="title">Production Title</label>
<input type="text" id="title" name="title" value="" />
</li>
<li>
<label for="main_student_producer">Main Student Producer's Name</label>
<input type="text" id="main_student_producer" name="main_student_producer" value="" />
</li>
<li>
<label for="main_student_prod_email">Main Student Producer's Email</label>
<input type="text" id="main_student_prod_email" name="main_student_prod_email" value="" />
</li>
<li>
<label for="second_producer">Second Producer</label>
<input type="text" id="second_producer" name="second_producer" value="" />
</li>
<li>
<label for="second_producer_email">Second Producers Email</label>
<input type="text" id="second_producer_email" name="second_producer_email" value="" />
</li>
<li>
<label for="third_producer">Third Producer</label>
<input type="text" id="third_producer" name="third_producer" value="" />
</li>
<li>
<label for="third_producer_email">Third Producer's Email</label>
<input type="text" id="third_producer_email" name="third_producer_email" value="" />
</li>
<li>
<label for="fourth_producer">Fourth Producer</label>
<input type="text" id="fourth_producer" name="fourth_producer" value="" />
</li>
<li>
<label for="fourth_producer_email">Fourth Producer's Email</label>
<input type="text" id="fourth_producer_email" name="fourth_producer_email" value="" />
</li>
<li>
<label for="synopsis">Brief Synopsis of the Production</label>
<textarea name="synopsis" rows="5" id="synopsis"></textarea>
</li>
<li>
<label for="institution">Name of Institution</label>
<input type="text" id="institution" name="institution" value="" />
</li>
<li>
<label for="program">Program</label>
<input type="text" id="program" name="program" value="" />
</li>
<li>
<label for="faculty_contact">Faculty or School Contact</label>
<input type="text" id="faculty_contact" name="faculty_contact" value="" />
</li>
<li>
<label for="faculty_email">Faculty Email</label>
<input type="text" id="faculty_email" name="faculty_email" value="" />
</li>
</ol>
</fieldset>
</li>
</ol>
<p style="text-align:right;">
<input type="reset" value="CANCEL" />
<input type="submit" value="OK" />
</p>
</form>
</div><!-- end drama -->The JS I have written:
// JavaScript Document
$(function() {
$('#mem_name').addClass('turnOff');
$('#appType').change(function() {
switch ($(this).val()) {
case 'institution':
$('#mem_name').removeClass('turnOn').addClass('turnOff');
$('#attachFile, #instit_name, #beac_rep, #title_rep, #instituteweb').addClass('turnOn');
break;
case 'individual':
$('#attachFile, #instit_name, #beac_rep, #title_rep, #instituteweb').removeClass('turnOn').addClass('turnOff');
$('#mem_name').addClass('turnOn');
break;
case 'associate':
$('#attachFile, #instit_name, #beac_rep, #title_rep').removeClass('turnOn').addClass('turnOff');
$('#instit_name, #mem_name, #instituteweb').addClass('turnOn');
break;
}
});
});
$(function() {
$('#chooseCat').change(function() {
switch ($(this).val()) {
case 'video documentary':
$('#documentary').addClass('turnOn');
$('#drama, #comedy, #series, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video drama':
$('#drama').addClass('turnOn');
$('#documentary, #comedy, #series, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video comedy':
$('#comedy').addClass('turnOn');
$('#documentary, #drama, #series, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video serial or special':
$('#serial').addClass('turnOn');
$('#documentary, #drama, #comedy, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video studio newscast':
$('#studio').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video music':
$('#music').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video corporate or PSA short':
$('#corp_psa_short').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video ENG news story':
$('#eng_news').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video animation':
$('#animation').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'video commercial or promo':
$('#commercial').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'web design':
$('#web').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio drama':
$('#aud_drama').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio comedy':
$('#aud_comedy').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_spot, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio spot news':
$('#aud_spot').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_commercial, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio commercial':
$('#aud_commercial').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #audio_promo, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio promotion':
$('#audio_promo').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #aud_psa').removeClass('turnOn').addClass('turnOff');
break;
case 'audio PSA':
$('#aud_psa').addClass('turnOn');
$('#documentary, #drama, #comedy, #serial, #studio, #music, #corp_psa_short, #eng_news, #animation, #commercial, #web, #aud_drama, #aud_comedy, #aud_spot, #aud_commercial, #audio_promo').removeClass('turnOn').addClass('turnOff');
break;
}
});
});I am wondering ( relatively new to JQUERY) if the two $function() items need to be differentiated somehow or if the two sections need to be combined? The top part of the js code controls another form (which works fine) while the bottom controls the form I am currently working on.
I have added two classes to my CSS, one called .turnOn and the other .turnOff, one with display: none and the other display: block.
What am I missing here?
thanks
Dave