Reputation: 500

Switching hide and show in html form

I wanted to show and hide the visibility of the html form. I have 2 modes when mode 1 is selected then the form should show up with the text box and when mode 2 is selected the form with radio buttons should show up and mode 1 should be hidden and initially everything is hidden. This is what I have done so far but my css with jQuery is not able to apply.

HTML Form

<form>
  <fieldset>
    <legend>Lets switch</legend>
     Mode 1 
    <input type="radio" class="modeClass" name="change_mode" value="Text box">
     Mode 2  
    <input type="radio" class="modeClass" name="change_mode" value="Radio buttons"> <br>
    <div id= "text_form">
   <label class="hidden"> Name:</label> <input type="text" class ="hidden"><br>
   <label class= "hidden"> Email:</label> <input type="text" class ="hidden"><br>
    <label class= "hidden"> Date of birth:</label> <input type="text" class ="hidden">
    </div>
   <div id="radio_form">
   <input type="radio" name="sex" class ="hidden" value="male"><label  class="hidden">Male</label>
   <input type="radio" name="sex" class="hidden" value="female"><label class= "hidden">Female</label>
   </form>
  </fieldset>
</form>

CSS

<style>
.hidden 
{

  display:none;

} 
</style>

JQuery

 $(document).ready(function(){

    /*Getting the value of the checked radio buttons*/
    $("input:radio[class=modeClass]").click(function() {
       var value = $(this).val();
     /*  console.log(value);*/
    if(value=="Text box")
    {

    $("#text_form").css("display","block");
   /* console.log("Time to call input box");*/
    }

    if(value=="Radio buttons")
    {

    $("#radio_form").css("display","block");

    }


    });

    });

Any idea suggestions will be highly appreciated.

Upvotes: 2

Answers (5)

Raj

Reputation: 1551

I am not a big fan of .show()/.hide() as it causes other inconsistencies. I created a live JSFiddle with a slightly improved version of your code. Just as Dream Eater did, I consolidated all your class='hidden' statements onto the parent div element, making it cleaner and much easier to work with. Additionally, you did not need the .css('display', 'block') method, so that was removed. Other than that, the code was fine and here is what you were looking for:

link--> http://jsfiddle.net/CFP9N/

Upvotes: 0

Jai

Reputation: 74738

Your jquery seems quite ok but you need little bit extra:

$(document).ready(function(){
    $("input:radio[class=modeClass]").click(function() {
       var value = $(this).val();
       if(value=="Text box"){
           $("#text_form").show().siblings("#radio_form").hide();
       }

       if(value=="Radio buttons"){
           $("#radio_form").show().siblings("#text_form").hide();
       }
    });
});

FIDDLE HERE

Upvotes: 1

PSL

Reputation: 123739

You should try this

http://jsfiddle.net/pramodsankar007/u9RZy/

<form>
    <fieldset>
        <legend>Lets switch</legend>Mode 1
        <input type="radio" class="modeClass" name="change_mode" value="Text box">Mode 2
        <input type="radio" class="modeClass" name="change_mode" value="Radio buttons">
        <br>
        <div id="text_form" class="hidden">
            <label>Name:</label>
            <input type="text">
            <br>
            <label>Email:</label>
            <input type="text">
            <br>
            <label>Date of birth:</label>
            <input type="text">
        </div>
        <div id="radio_form" class="hidden">
            <input type="radio" name="sex" value="male">
            <label>Male</label>
            <input type="radio" name="sex" value="female">
            <label>Female</label>
</form>
</fieldset>
</form>





$("input:radio[class=modeClass]").click(function () {
      var value = $(this).val();
      if (value == "Text box") {
          $("#radio_form").show();
          $("#text_form").hide();
          /* console.log("Time to call input box");*/
      }
      if (value == "Radio buttons") {
         $("#radio_form").hide();
          $("#text_form").show();

      }
  });

Upvotes: 1

hjpotter92

Reputation: 80639

You don't need to apply class="hidden" to so many elements. Here is a fiddle with working code.

HTML

<form>
    <fieldset>
        <legend>Lets switch</legend>Mode 1
        <input type="radio" class="modeClass" name="change_mode" value="Text box" />Mode 2
        <input type="radio" class="modeClass" name="change_mode" value="Radio buttons" />
        <br />
        <div id="text_form" class="hidden">
            <label>Name:</label>
            <input type="text" />
            <br />
            <label>Email:</label>
            <input type="text" />
            <br />
            <label>Date of birth:</label>
            <input type="text" />
        </div>
        <div id="radio_form" class="hidden">
            <input type="radio" name="sex" value="male" />
            <label>Male</label>
            <input type="radio" name="sex" value="female" />
            <label>Female</label>
        </div>
    </fieldset>
</form>

jQuery

$(document).ready(function () {
    /*Getting the value of the checked radio buttons*/
    $("input.modeClass").on( 'click', function () {
        var value = $(this).val();
        if (value == "Text box") {
            $("#text_form").show();
            $("#radio_form").hide();
        }
        if (value == "Radio buttons") {
            $("#text_form").hide();
            $("#radio_form").show();
        }
    });
});

Upvotes: 2