CODEWITHSUNDEEP
javascript
Emily
Emily

Reputation: 39

show/hide drop down

here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
    document.getElementById("radio1").onchange = function() {
        if(this.checked == true) {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        }
    };

    document.getElementById("radio2").onchange = function() {
        if(this.checked == true) {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        }
    };
</script>
</HEAD>
<BODY>

<form method = "post">

<br /><p id="first"><label>First Name:</label><input type="text" name="first" size="30" /></p>

<br /><p id="last"><label>Last Name:</label><input type="text" name="last" size="30" /></p>

<br /><p id="instructor"><label>Instructor:</label><select name="instructor">
<option value="instructor1">instructor1</option>
<option value="instructor2">instructor2</option></select></p>

<br /><p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
<label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
<label>Month Complete:
<select>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

</form>
</BODY>
</HTML>

I will have more fields like the hospital field, so i will need to do it more than one. I need a drop down to show when a certain radio button is selected. But everything i try in javascript doesnt work. I am new to javascript.

Upvotes: 0

Views: 4398

Answers (4)

Spooks
Spooks

Reputation: 7187

You have to wait until your object (radio button load) Here is some code that works. Or call the window.onload

<script type="text/javascript">
    function checkEm() {
        if (document.getElementById("radio1").checked) {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        };

        if (document.getElementById("radio2").checked) {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        };
    };
    </script>

 <label><input id="radio1" type="radio" name="hospital" onclick="checkEm()"  /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" onclick="checkEm()" /> Complete </label>

Upvotes: 0

mrBorna
mrBorna

Reputation: 1777

as a side issue you dont need the style.visibility... line

one more thing:

Typically, its better to add event listeners using the attachEvent or addEventListener methods (allows more control, and multiple listeners for one action) like this: 

function addEvent(el, eType, fn, uC) {
  if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
  } 
  else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
  }
  else {
    el['on' + eType] = fn;
  }
}

and then just use

addEvent(
    document.getElementById("radio1"),
    "change",
    function(){
      if(this.checked == true){
            document.getElementById("list1").style.display = "none";
      }
    },
    false);

This is both cross-browser and better practice

Upvotes: 0

David Rettenbacher
David Rettenbacher

Reputation: 5120

I think its because the code is executed BEFORE the list is actually added to the document structure. Encapsulate it in a window.onload handler like this:

...
<script type="text/javascript">
window.onload=function()
{
    document.getElementById("radio1").onchange = function()
    {
        if(this.checked == true)
        {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        }
    };

    document.getElementById("radio2").onchange = function()
    {
        if(this.checked == true)
        {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        }
    };
}
</script>
...

Lg
warappa

Upvotes: 1

James Montagne
James Montagne

Reputation: 78780

Your biggest issue here is that the javascript is going to execute prior to the radio buttons being created. Therefore document.getElementById(...) is not going to find the element, as it doesn't exist. Try adding your code to a function and having that function run onload of the body.

Upvotes: 0

Related Questions