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.
– Julien Ch., Commented Jul 12, 2012 at 21:13

Julien Ch. · Accepted Answer · 2012-07-12 21:09:12Z

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, 2012 at 21:09

Julien Ch.

1,2619 silver badges17 bronze badges

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

1 Comment

Julien Ch. Over a year ago

When possible you'd better use object reference instead of names, see anAgent's examples.

Robert · Accepted Answer · 2012-07-12 18:52:59Z

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, 2012 at 18:52

Robert

2,44621 silver badges12 bronze badges

1 Comment

bmanhard Over a year ago

I tried removing the quotes from the formName, elementName and a combination of either of the two and it is still not working.

Community · Accepted Answer · 2017-05-23 10:34:29Z

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, 2017 at 10:34

CommunityBot

11 silver badge

answered Jul 12, 2012 at 19:03

anAgent

2,78027 silver badges37 bronze badges

3 Comments

bmanhard Over a year ago

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 Over a year ago

Also what is the valid way in which to pull the form name that an element is in instead of this.form.name?

anAgent Over a year ago

You didn't include all of the html. So, if your elements are wrapped in a form tag, then "this.form.name" is valid.

bmanhard · Accepted Answer · 2012-07-13 14:42:36Z

0

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");
    }
}

answered Jul 13, 2012 at 14:42

bmanhard

1491 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using Javascript function variables to define a DOM element

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related