I already have the following code to show/hide two form elements based on a dropdown selection. It worked when there was a single instance of a form on the page using IDs. Now there's multiple forms, which use classes. I've tried getElementsByClass but for some reason it's not working.

Here is the Javascript:

function Toggle(obj){

    var val=obj.value;



    if (!obj.m){ obj.m=''; }

    if (!obj.m.match(val)){ obj.m+=','+val+','; }



    var hide=obj.m.split(',');



    for (var zxc0=0;zxc0<hide.length;zxc0++){

        if (document.getElementsByClassName(hide[zxc0])){

            document.getElementsByClassName(hide[zxc0]).style.display='none';

        }

    }



    var show=val.split(',');



    for (var zxc1=0;zxc1<show.length;zxc1++){

        if (document.getElementsByClassName(show[zxc1])){

            document.getElementsByClassName(show[zxc1]).style.display='';

        }

    }

}

And the HTML:

<form class=contact name=contact action=# method=post>

    <label>How did you hear about us:</label>

    <div id=styled-select>

        <select name=how onChange=Toggle(this); class=dropdown>

            <option value=Internet Search>Internet Search</option>

            <option value=Facebook >Facebook</option>

            <option value=Twitter >Twitter</option>

            <option value=LinkedIN >LinkedIN</option>

            <option value=Referral,Referral2 >Referral</option>

            <option value=Other,Other2>Other</option>

        </select>

    </div>

     <label class=Referral style=display:none;>Referred By:</label>

     <input name=Referral2 style=display:none; class=hidden-txt Referral2>

     <label class=Other style=display:none;>Please Specify:</label>

     <input name=Other2 value= style=display:none; class=hidden-txt Other2>

     ...

</form>

When referral is selected from the dropdown, the label class=Referral and input class=Referral2 should appear. Upon selection of Other, label class=Other and input class=Other2 should appear (and referral should hide).