Using Javascript function variables to define a DOM element

Question

I'm using a yes/no dropdownbox to hide conditional form elements via CSS. It works fine if I manually define the form name and element name, but if I try to define them via variables it won't function. I've been troubleshooting and researching for about an hour to no avail. Here is my Javascript function.

function binaryHideShow(formName, elementName)
{
    if (document.forms["'" + formName + "'"].elementName.value == "yes")
    {
        document.getElementById("'" + elementName + "'").setAttribute("class","show");
    }
    else
    {
        document.getElementById("'" + elementName + "'").setAttribute("class","hide");
    }
}

And here is the HTML element.

<select name="PrimaryFiledBankruptcyDropDownList" onchange="binaryHideShow(this.form.name, this.attributes['name'].value);">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

<div id="PrimaryFiledBankruptcyDropDownList">
<label for="PrimaryBankruptcyTypeDropDownList">Bankruptcy Type:</label> 
<select name="PrimaryBankruptcyTypeDropDownList" onchange="">
<option value=""></option>
<option value="chapter-7">Chapter 7</option>
<option value="chapter-13">Chapter 13</option>
</select>
</div>

I've already ensured that my this statements on the html side are pulling the correct elements.

To be clear if I manually enter the variables names as per the example below it will work fine, and the html this statements return the EXACT names that I'm using below.

function binaryHideShow()
{
    if (document.forms["ProgramApplicationForm"].PrimaryFiledBankruptcyDropDownList.value == "yes")
    {
        document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","show");
    }
    else
    {
        document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","hide");
    }
}

That seems strange to me that you hide the same dropdown list in which you select yes/no, shouldn't you be hiding the **other** dropdown list? — Julien Ch., Jul 12 '12 at 21:13

score 1 · Accepted Answer · answered Jul 12 '12 at 21:09

1

There is an error in your function for access the element in your form, try:

function binaryHideShow(formName, elementName)
{
    if (document.forms[formName][elementName].value == "yes")
    {
        document.getElementById(elementName).setAttribute("class","show");
    }
    else
    {
        document.getElementById(elementName).setAttribute("class","hide");
    }
}

answered Jul 12 '12 at 21:09

Julien Ch.

1,231
9
16

When possible you'd better use object reference instead of names, see *anAgent*'s examples. – Julien Ch. Jul 12 '12 at 21:15

score 0 · Answer 2 · answered Jul 12 '12 at 18:52

0

Change from

document.forms["'" + formName + "'"]

to

document.forms[ formName ]

Otherwise you're passing in a name as if you did "'PrimaryBankruptcyTypeDropDownList'" (note the double quotes).

answered Jul 12 '12 at 18:52

Robert

2,441
21
12

I tried removing the quotes from the formName, elementName and a combination of either of the two and it is still not working. – bmanhard Jul 12 '12 at 19:00

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

This should get you started.

HTML

<form name="MyForm" id="MyForm">
    <select name="PrimaryFiledBankruptcyDropDownList"nchange="binaryHideShow(this,this.form);">
        <option value=""></option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
</form>

JavaScript

function binaryHideShow(element,form) {
    console.log("Element Name: " + element.name);
    console.log("Form Name: " + form.name);
    if(element.value == "yes") {
        console.log('sure does');
    } else {
        console.log('nope');
    }
}

Off topic - but, you might find this useful...

Look into separating your actions from your view - meaning: get rid of the "onchange" event and if possible - think about using jQuery.

Some good reads for you:

edited May 23 '17 at 10:34

Community

1
1

answered Jul 12 '12 at 19:03

anAgent

2,550
24
34

That work's but it doesn't serve the same purpose as the function I'm trying to create. I want to be able to hide or show a div with the same id as the event element's name by passing in the name of the form and element to the function. I have a lot of these binary conditionals and I'd rather not write a separate function for each one if I can just pass variables instead. – bmanhard Jul 12 '12 at 19:10
Also what is the valid way in which to pull the form name that an element is in instead of this.form.name? – bmanhard Jul 12 '12 at 19:12
You didn't include all of the html. So, if your elements are wrapped in a form tag, then "this.form.name" is valid. – anAgent Jul 12 '12 at 19:21
That sure got me started. Thanks – morespace54 Aug 22 '14 at 22:19

score 0 · Answer 4 · answered Jul 13 '12 at 14:42

I ended up figuring it out. In order to use the element portion of the document.forms you have to specify elements[] with the variables inside as such:

function binaryHideShow(formName, elementName)
{
    if (document.forms[formName].elements[elementName].value == "yes")
    {
        document.getElementById(elementName).setAttribute("class","show");
    }
    else
    {
        document.getElementById(elementName).setAttribute("class","hide");
    }
}

Using Javascript function variables to define a DOM element

4 Answers4