Using JavaScript and a dropdown to change page content

Question

Google has plenty of results for similar problems, but after a day of searching, I still cannot figure this out.

I have a dropdown menu with six choices.

I have a switch statement with which I would like to evaluate the chosen item in the dropdown list to determine which document.write statements to execute.

Please keep in mind that the variables in the document write statements are defined before this block of code picks up. Also, the opening tag exists much earlier in the code as well.

Thank you for your help.

    function handleSelect(account)
    {
        //var selectedAcct = document.getElementByName("acctTypes");

        document.write("<table><tbody>");

        switch(account)
        {

            case "View All":
                document.write(savings);
                document.write(checking);
                document.write(moneymkt);
                document.write(cdjumbo);
                document.write(cdsmall);
                document.write(iras);
                break;
            case "Certificates of Deposit (CDs)":
                document.write(cdjumbo);
                document.write(cdsmall);
                break;
            case "Individual Retirement Account (IRA)":
                document.write(iras);
                break;
            case "Money Market":
                document.write(moneymkt);
                break;
            case "Savings":
                document.write(savings);
                break;
            case "Checking":
                document.write(checking);
                break;
            default:
                document.write(savings);
                document.write(checking);
                document.write(moneymkt);
                document.write(cdjumbo);
                document.write(cdsmall);
                document.write(iras);
        }

        document.write("</tbody></table>");
    }


</script>

<form name="acctTypes" action=" ">
    <select name="acctDropdown" id="acctDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
        <option value="View All" selected>View All</option>
        <option value="Certificates of Deposit (CDs)">Certificates of Deposit (CDs)</option>
        <option value="Individual Retirement Account (IRA)">Individual Retirement Account (IRA)</option>
        <option value="Money Market">Money Market</option>
        <option value="Savings">Savings</option>
        <option value="Checking">Checking</option>
    </select>
</form>

I don't see what your problem is. For example, when you run it, what do you get? and what do you expect to get? — Tae-Sung Shin
– Tae-Sung Shin, Commented Jul 29, 2011 at 3:59
I'm not getting an error at all, as far as I can tell. The page loads with the dropdown, without the table, and when I select a different dropdown item, it appears to do nothing. — Nicholas Flees
– Nicholas Flees, Commented Jul 29, 2011 at 4:01
The variables inside of the document.write statements form different tables, depending on the combination of statements executed. My expectation is to see the table composed of all of the different tables when the page loads and then to see the smaller table parts depending on the dropdown choice I select. — Nicholas Flees
– Nicholas Flees, Commented Jul 29, 2011 at 4:03
And what are you currently seeing when you run the code? Is it displaying one table only? Or no tables? Is it updating when you change the drop down? — rabs
– rabs, Commented Jul 29, 2011 at 4:05

rabs · Accepted Answer · 2011-07-29 04:24:27Z

2

It seems from the comments that you are lacking an element to show the tables in.

Try adding a div element to the page in the position you want the table, and then setting the innerHTML of the div to be the table html you wish to display.

so create a div like

<div id="myTableContainer"></div>

and change the script

case "Savings":
    document.getElementById("myTableContainer").innerHTML = savings
    break;

Here is a demo (Select savings and the table will appear)

<html>
    <body>
       <script>
          function handleSelect(account) {
            var savings = "<table><tr><td>test</td></tr></table>";
            switch(account)
            {
           case "Savings":
          document.getElementById("myTableContainer").innerHTML = savings
          break;
        }
         }
    </script>
    <select name="acctDropdown" id="acctDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
    <option value="View All" selected>View All</option>
    <option value="Certificates of Deposit (CDs)">Certificates of Deposit (CDs)</option>
    <option value="Individual Retirement Account (IRA)">Individual Retirement Account (IRA)</option>
    <option value="Money Market">Money Market</option>
    <option value="Savings">Savings</option>
    <option value="Checking">Checking</option>
</select>
 <div id="myTableContainer"></div>

 </body>
</html>

edited Jul 29, 2011 at 4:24

answered Jul 29, 2011 at 4:09

rabs

1,8273 gold badges18 silver badges29 bronze badges

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

8 Comments

Nicholas Flees Over a year ago

Thanks, rabs. The variable savings, for example, is a series of concatenated strings that contain the table container. If I comment out everything but the document.write statements, the table works perfectly.

Nicholas Flees Over a year ago

Am I defining the account variable properly?

Paul Karlin Over a year ago

You might need something more like "handleSelect(this.options[this.selectedIndex].value)"

rabs Over a year ago

The account variable will come through as selected value (becuase you have the onChange inline) you don't need to use the selectedIndex.

rabs Over a year ago

change all the document.write statements to document.getElementById("myTableContainer").innerHTML = and add that div myTableContainer to the page and it will work

|

Paul Karlin · Accepted Answer · 2011-07-29 04:11:23Z

1

As you've written this, I think your page would continue to grow with an additional table each time handleSelect() is called. You might be better off defining an empty TABLE & TBODY tag statically and then setting its innerHTML instead of using document.write().

For example, below your form you'd have something like

<table><tbody id="myContent"></tbody></table>

And then your document.write() statements would instead be something like

document.getElementById("myContent").innerHTML = cdjumbo + cdsmall;

answered Jul 29, 2011 at 4:11

Paul Karlin

8407 silver badges21 bronze badges

3 Comments

Nicholas Flees Over a year ago

Thank you for the suggestion. I will try to figure out how to do that. My tables vary in size, but I think I get what you're saying. I'm still afraid I can't figure out how to tell it which content to fill the table with.

Paul Karlin Over a year ago

If you're using a JavaScript framework like YUI or jQuery, there are tools included that would make this work (and its debugging) easier. Even if you're not, you could benefit from browser tools like Firebug and the built-in dev tools included with IE9/Chrome to examine variables and/or step through your script. And one of the most basic JS debugging tools of all (which I generally don't recommend unless you're out of other options) would be to stick alert() calls into your code.

Nicholas Flees Over a year ago

Thank you both for your help. I'm going to play around with it and incorporate your suggestions.

Collectives™ on Stack Overflow

Using JavaScript and a dropdown to change page content

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related