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

CSS

.foo{display:none;}

HTML

<form>
<SELECT name=bar id=bar onchange="changeform(this);">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</form>
<div id=form1 class=foo>bla bla bla</div>
<div id=form2 class=foo>bla bla bla</div>
<div id=form3 class=foo>bla bla bla</div>
<div id=form4 class=foo>bla bla bla</div>

JAVASCRIPT

function changeform(obj){
   $(".foo").css({"display":"none"});
   var str = obj.options[obj.selectedIndex].value;
   switch (str){
    case "a":
       $("#form1").css({"display":"block"});
        break;
    case "b":
       $("#form2").css({"display":"block"});
        break;
    case "c":
       $("#form3").css({"display":"block"});
        break;
    case "d":
       $("#form4").css({"display":"block"});
        break;
    }
}

Of course it would be easier if the option values matched the id of the relevant form. you could then reduce the function to:

function changeform(obj){
   $(".foo").css({"display":"none"});
   var str = obj.options[obj.selectedIndex].value;
   $(str).css({"display":"block"});
}

Thanks for your reply. This is not using the JQuery library ... correct? Will this method work across most browsers. By this I mean IE 6.0 or better and Mozilla, Safari etc?

This is using jquery to change the css.
You can have jquery within a normal javascript function, and normal javascript within a jquery function.

This is using jquery to change the css.
You can have jquery within a normal javascript function, and normal javascript within a jquery function.

Ahh .. OK .. as I said .. relatively new to JQuery. I will give this a try ASAP and let you know. Thanks again for your reply.

Dave

OK, I am trying to use the second option you suggested, where the option values match the div id. I have this in the <select>:

<select name="chooseCat" id="chooseCat" onchange="changeform(this);">
            <option value="video_documentary">Video: Documentary</option>
            <option value="video_drama">Video: Drama</option>
</select>

and this in the rest of it:

<div class="show" id="video_documentary">
        <form class="clean" id="v_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="show" id="video_drama" >
        <form class="clean" id="v_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 -->

and this in the CSS:

.show {
	display: none;
}

but it is still not working.

What did I miss.

Dave

Sorry, forgot this:

function changeform(obj){
	$(".show").css({"display":"none"});
		var str = obj.options[obj.selectedIndex].value;
		$(str).css({"display":"block"});
	}

Oops my bad.
Should be:

function changeform(obj){
	$(".show").css({"display":"none"});
	var str = obj.options[obj.selectedIndex].value;		$("#"+str).css({"display":"block"});	
}

Yes ... that works. That is a big help. Thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.