Show a form depending on an option

From The IT Community
Jump to: navigation, search




If you have a form on your HTML site, and you want to show parts of this form depending on the options you selected, then you will need a little JavaScript.

Here is how to show a form depending on an option:


Create a new file, name it slide.js and copy the following text into it:

$(document).ready(function(){
	$("#parent1").css("display","none");
	$("#parent2").css("display","none");
           
    $(".selected").click(function(){
	if ($('input[name=numberofplayers]:checked').val() == "2" || $('input[name=numberofplayers]:checked').val() == "3" ) {
           $("#parent1").slideDown("fast"); //Slide Down Effect   
       } else {
           $("#parent1").slideUp("fast");	//Slide Up Effect
       }
   	if ($('input[name=numberofplayers]:checked').val() == "3" ) {
           $("#parent2").slideDown("fast"); //Slide Down Effect   
       } else {
           $("#parent2").slideUp("fast");	//Slide Up Effect
       }
    });            
});


What this will do, is hide the two parts of the form called parent1 and parent2. Then it will check in the part called selected if the numberofplayers radio button is either 2 or 3. Depending on that, it will show either parent1 or parent1 and parent2.

In your HTML site, first include the following in the <HEAD> section:

<script type="text/javascript" src="slide.js"></script>

This will tell your site to use the script from above.

Then, include the form in the <BODY> section:

<ol class="formset">
 <li><label for="displayname">Name of your Bot: </label>
 <input type="text" id="displayname" value="Player" name="displayname"/></li>
 			
 <li><label for="players">How many Players?</label> 
 <input type="radio" name="numberofplayers" value="1" class="selected" checked /> One
 <input type="radio" name="numberofplayers" value="2" class="selected" /> Two
 <input type="radio" name="numberofplayers" value="3" class="selected" /> Three</li>
 </ol>
 			
 <ol id="parent1" class="formset">
 <li><label for="age1">Which Droid do you want to be:</label><br /><br /><br /></li>
 <li><input type="radio" name="skin" value="player1" checked /> <img src="images/player.png"><br /><br /></li>
 <li><input type="radio" name="skin" value="player2" /> <img src="images/player2.png"></li>
 </ol>
 <ol id="parent2" class="formset">
 <li><input type="radio" name="skin" value="player3" /> <img src="images/player3.png"><br /></li>
 </ol>
 <input type="submit" name="submit" value="Start the game!" class="submitbtn" />
 </fieldset>

I use this to give the player the chance to enter his name and select how many players there will be in total. If the answer is Two or Three, I will display another set of radio buttons where the player can select the skin for his guy (called droid here).

This is a very handy little piece of script which you can use in various ways, give it a try. ;-)



Was this article helpful? Then please donate to keep The IT Community alive...

If you found this article helpful please share it, comment and help others by writing your own article.






Translate this page:




Articles found in the same category:
(max. 20 shown)