javascript function not doing anything

Question

I have the following function that I want to hide some of the text input fields in my form. all the fields I want hidden are contained in the div 'site2'

<script language="Javascript">

function showHide(value) {
if (value=='yes') {
        document.getElementById(site2).style.display = "none";
        document.getElementById(site2).style.display = "block";
        document.add.addSite2Line1.disabled=true;
    }
    else if (value=='no') {
        document.getElementById(site2).style.display = "inline";
        document.getElementById(site2).style.display = "none";
    }
}
}
    </script>

and a drop down box created. it should show when no is selected

<label><span>Single Site?</span><Select name="field" onchange="showHide(this.selectedIndex);"></label>
 <Option value="yes">yes</option>
 <Option value="no">no</option>
 </Select><br /><br /><br /><br />

However when I run the page nothing happens at all

Are you absolutely sure it's `getElementById(site2)` and not `getElementById("site2")`? The former is a variable name (and if there's no such variable, `undefined` will be returned), the latter is a string. Try to `alert(site2)` to see what value is contained in it. — Petr Janeček, Jul 28 '12 at 05:18
You seem to have an extra brace at the end of your example javascript — Chris Moutray, Jul 28 '12 at 05:26
And your closing tag for *label* looks to be in the wrong place — Chris Moutray, Jul 28 '12 at 05:26

Glen Hughes · Accepted Answer · 2012-07-28T05:34:37.990

You're passing in the selectedIndex, but you're checking it as if it's the value... try this instead:

<Select name="field" onchange="showHide(this.value);"></label>

Or try retrieving the value from the item before processing:

function showHide(selectedIndex) {
    var value = document.getElementById("field").options[selectedIndex].value;

    if (value=='yes') {
        document.getElementById(site2).style.display = "none";
        document.getElementById(site2).style.display = "block";
        document.add.addSite2Line1.disabled=true;
    }
    else if (value=='no') {
        document.getElementById(site2).style.display = "inline";
        document.getElementById(site2).style.display = "none";
    }
}

Slanec's comment about getElementById(site2) vs getElementById("site2") is also valid. It's hard to tell without seeing the rest of your page, but if you don't have a variable named site2 declared in Javascript, then you may receive additional errors.

The value should work on the select item as well: http://stackoverflow.com/questions/5416767/javascript-selected-value — Glen Hughes, Jul 28 '12 at 05:28
I tested it with value, and got further than with selected index... I got other errors because I didn't have site2 defined, but it was getting into the if/else blocks. — Glen Hughes, Jul 28 '12 at 05:30

score -1 · Answer 2 · answered Jul 28 '12 at 06:48

-1

Its very simple and just need to remove a extra braces before

function showHide(value) {
if (value=='yes') {
        document.getElementById(site2).style.display = "none";
        document.getElementById(site2).style.display = "block";
        document.add.addSite2Line1.disabled=true;
    }
    else if (value=='no') {
        document.getElementById(site2).style.display = "inline";
        document.getElementById(site2).style.display = "none";
    }
}

answered Jul 28 '12 at 06:48

Suman Singh

1,284
11
17

This isn't going to help since selected index is being passed in, but the function checks against the value – Chris Moutray Jul 28 '12 at 07:28

javascript function not doing anything

2 Answers2