CODEWITHSUNDEEP
javascriptformshiddenvisibledrop-down-menu
adg
adg

Reputation: 35

Show (Visible/Hidden NOT Show/Hide) HTML Element based on form select box selection

The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):

<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>



#IdOne, #IdTwo, #IdThree (visibility:hidden;}


function showhideid()
{
    if (document.form.checkbox.checked)
    {   
        document.getElementById("IdOne").style.visibility = "visible";
        document.getElementById("IdTwo").style.visibility = "visible";
        document.getElementById("IdThree").style.visibility = "visible";
        document.getElementById("IdFour").setAttribute("class", "required");

    }
    else
    {
        document.getElementById("IdOne").style.visibility = "hidden";
        document.getElementById("IdTwo").style.visibility = "hidden";
        document.getElementById("IdThree").style.visibility = "hidden";   
        document.getElementById("IdFour").setAttribute("class", "");
    }
}

Now, if I can accomplish the same thing using a select box (below), I will die a happy man.

This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.

<html>

<form id="form">

<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>

<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">

<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>

<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />

</form>

</html>

Upvotes: 1

Views: 53791

Answers (2)

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

take a look at the select tag:

<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>

Now you must give a selector class to each element you want to show/hide:

<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
   Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />

Now look at the javascript:

jQuery(document).ready(function(){
 jQuery('input[name="SelectBox"]').change(function(){
  jQuery('.toggle').css({"visibility":"hidden"});//Hide all
  jQuery("#" + jQuery(this).val()).css({"visibility":"visible"});
 });
});

Upvotes: 3

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

You can do something like this:

<html>

<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>

</html>

this in javascript:

jQuery(document).ready(function(){
 jQuery("#selectBox").change(function(){
  jQuery(".toggle").hide();
  jQuery("#" + jQuery(this).val()).show();
 });
});

Upvotes: 1

Related Questions