Java Script Display Hidden Field

Question

I have a select with some options in HTML and what I am trying to do is for every different selected option I want to "Unhide" or display another set of options. Hopefully that makes sense. So I have a drop down options like 1, 2 if user select option, i.e. 1, I want to display another drop down menu.

The issue is that upon selection the 2nd drop down menu does not show at all.

The HTML:

  <select id="workshop" name="workshop" onclick="return test();">
                <option value="">Please select a Workshop</option>
                <option value="f">1</option>
                <option value="b">2</option>
            </select>

            <select id="date" name="date" style="display: none">
                <option value="">Please select a date</option>
                <option value="01/01/01">01/01/01 at 6.30pm</option>
            </select>

JavaScript:

function test(){
   if(document.getElementById('workshop').value == 'f'){
      document.getElementById('date').style.display = 'block';
    }
    else{
      document.getElementById('date').style.display = '';
    }
}

Ishan Jain · Accepted Answer · 2013-12-12 12:22:09Z

2

First of all Use onchange event instead of using onclick. because onchange event occurs when the value of an element has been changed(As your requirement).

Try with this code:

function test(){
   if(document.getElementById('workshop').value == 'f'){
      document.getElementById('date').style.display = 'block';
    }
    else{
      document.getElementById('date').style.display = 'none';
    }
}

Try in Js FIddle

answered Dec 12, 2013 at 12:22

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amin · Accepted Answer · 2013-12-12 12:12:20Z

1

function test(){
    if(document.getElementById('workshop').value == 'Forex'){
    document.getElementById('date').style.display = 'inline-block';//try this
}else{
    document.getElementById('date').style.display = 'none';
}

answered Dec 12, 2013 at 12:12

amin

1,2541 gold badge13 silver badges21 bronze badges

1 Comment

Tomazi Over a year ago

Hello, I tried your solution to this problem by replacing onclick with onchange but still the problems remains the same.

Sergi Juanola · Accepted Answer · 2013-12-12 12:13:00Z

1

Do not use the onclick event. Use onchange:

<select id="workshop" name="workshop" onchange="return test();">
   <option value="">Please select a Workshop</option>
   <option value="f">1</option>
   <option value="b">2</option>
</select>

<select id="date" name="date" style="display: none">
   <option value="">Please select a date</option>
   <option value="01/01/01">01/01/01 at 6.30pm</option>
</select>

Onclick works well with buttons, but any kind of input reacts better on change. I bet it shows up the second time you click on the first select.

PS: Text inputs and textareas work even better when checking onkeyup or onkeydown.

http://www.w3schools.com/jsref/event_onchange.asp

answered Dec 12, 2013 at 12:13

Sergi Juanola

6,6478 gold badges59 silver badges95 bronze badges

1 Comment

Tomazi Over a year ago

Hello, I tried your solution to this problem by replacing onclick with onchange but still the problems remains the same.

Prateek · Accepted Answer · 2013-12-12 12:21:13Z

1

Use onchange

HTML

<select id="leave" onchange="test()">
  <option value="">Please select a Workshop</option>
  <option value="f">1</option>
  <option value="b">2</option>
</select>

JavaScript

    function test()
    {
     if(document.getElementById('workshop').value == 'f')
     {
       document.getElementById('date').style.display = 'block';
     }
    else
    {
      document.getElementById('date').style.display = '';
    }
   }

answered Dec 12, 2013 at 12:21

Prateek

6,9852 gold badges27 silver badges37 bronze badges

Comments

Tomazi · Accepted Answer · 2013-12-12 12:35:50Z

1

OKkkkk Hello people I found the issue, What happens is that I had my HTML & JS files both opened form different directories :D So the changes I was making to my JS file did not affect the HTML file which i was oppening in the browser. Really sorry for my mistake guys everyone up 1

answered Dec 12, 2013 at 12:35

Tomazi

7919 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

Java Script Display Hidden Field

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related