Javascript: Trying To Show Different Forms Based On Drop Down Value?

I'm trying to display different forms based on the value of the selected drop down. I've got it almost all working, although it seems that when two values both display the same for

Solution 1:

First of all, some style. There's no need to attach all those event listeners, as just on can do the trick:

document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown')
        .addEventListener('change', function () {
    var value = this.value;
    if (value === "Buy A Product") {
        ...
    } elseif (value === "Support") {
        ...
    } ...
});

Inside every one of thos if branches, keep track of the elements you want to show. You can save some typing saving the ids instead:

if (value === "Buy A Product") {
    var show = ['C006_ctl00_ctl00_C006', 'C006_ctl00_ctl00_C008'];
} elseif (...) {...

At the end of the if branches, hide every element except those in the show array:

[
    "C006_ctl00_ctl00_C006",
    "C007_ctl00_ctl00_C001",
    "C008_ctl00_ctl00_C003",
    "C009_ctl00_ctl00_formControls",
    "C012_ctl00_ctl00_formControls",
    "C013_ctl00_ctl00_formControls",
    "C010_ctl00_ctl00_formControls",
    "C006_ctl00_ctl00_C008"
].forEach(function(id) {
    var style = show.indexOf(id) > -1 ? "block" : "none";
    document.getElementById(id).style.display = style;
});

This should do the trick. I guess you have some questions, feel free to ask.

You issue depends on the fact that you're using several event listeners, and they all run when you change the value of the select element. So the last one (presumably) "wins" over the others as it's executed last and hides/shows the elements accordingly.

Solution 2:

Use a switch statement. I didn't do the whole thing but it should get you started

fiddle

document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
    document.getElementById('C006_ctl00_ctl00_C006').style.display = 'none';
    document.getElementById('C006_ctl00_ctl00_C008').style.display = 'none';
    document.getElementById('C008_ctl00_ctl00_C003').style.display = 'none';
    document.getElementById('C010_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('C009_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('C012_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('C013_ctl00_ctl00_formControls').style.display = 'none';
    switch (this.value) {
        case"Buy A Product":
                 // show "Buy A Product" fields here etcbreak;
        case"Support":
            break;
        case"Ask A Question":
            break;
        case"Literature Request":
            break;
        case"AE Account":
            document.getElementById('C010_ctl00_ctl00_formControls').style.display = 'block';
            document.getElementById('C012_ctl00_ctl00_formControls').style.display = 'block';
            break;
    }
});

Solution 3:

The reason for this behaviour is that when you select that option, the event handler for AE Account runs after the event handler for Literature Request. I recommend using just one event handler instead. Something along these lines is a lot more readable:

var elts = {
    address: document.getElementById('C010_ctl00_ctl00_formControls'),
    brochures: document.getElementById('C009_ctl00_ctl00_formControls'),
    accHeader: document.getElementById('C012_ctl00_ctl00_formControls'),
    litHeader: document.getElementById('C010_ctl00_ctl00_formControls'),
    zip: document.getElementById('C006_ctl00_ctl00_C006'),
    interest: document.getElementById('C006_ctl00_ctl00_C008'),
    question: document.getElementById('C008_ctl00_ctl00_C003'),
    support: document.getElementById('C007_ctl00_ctl00_C001')
}

document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
    var toShow = {
        address: 0, brochures: 0, accHeader: 0, litHeader: 0, zip: 0, interest: 0, question: 0, support: 0
    };
    switch(this.value == "Buy A Product") {
    case"Buy A Product": toShow.interest = 1; toShow.zip = 1; break;
    case"Support": toShow.support = 1; break;
    case"Ask A Question": toShow.question = 1; break;
    case"Literature Request": toShow.brochures = 1; toShow.address = 1; break;
    case"AE Account": toShow.accHeader = 1; toShow.address = 1; break;
    }

    for(var i in toShow) {
        elts[i].style.display = toShow[i] ? 'block' : 'none';
    }
});