dynamically add <select> boxes with javascript

Question

I have a form where a user selects a file, and then should be able to choose how many parameters the report they are uploading has

I want to have a drop down that has the numbers 0 -5 and when a user selects a number that many boxes with parameter types are shown, like a drops down with "date", "name", "part#" etc... in a select menu, is made for each number the user selects

I looked through the other solutions on S.O. and they make sense but I just can't seem to get them to work,

here is what I have so far just to test if one box will appear:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>

</h:head>

<body>



    <ui:composition template="./templates/template.xhtml">

        <ui:define name="content">
            <c:choose>
                <c:when test="#{controls.designAuth}">
                Welcome Report Designer!<br /><br />

                <div id="fileUpload">



                    <form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">

                        <b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />

                        Please specify a file:<input type="file" name="file" size="40"/><br />
                        Number of parameters: <select name='numSelect' onchange="draw_param_dropdowns();">
                                                    <option>0</option>
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                              </select><br />

                                              <select class="parametersHide"  id="select1"><option></option></select>
        <script type="text/javascript" language="Javascript">


                                                    function draw_param_dropdowns(){

                                                      var sel = document.getElementById("select1");
                                                      sel.style = "visibility:visible";
                                                    }

           </script>

                        <input type="submit" value="Upload"/>

                    </form>

                </div>
                </c:when>
                <c:otherwise>
                    Not Authorized 
                </c:otherwise>
            </c:choose>

        </ui:define>

    </ui:composition>

</body>
</html>

"view Source" result:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
    <link href="./../resources/dtree/dtree.css" rel="stylesheet" type="text/css" />


    <script type="text/javascript" src="./../resources/dtree/dtree.js"></script>
    <title>Reports</title></head><body>


    <div id="top" class="top">

            <h1>Wingfoot Reports v0.3
                <div style="float:right;margin-right: 20px;">
<form id="j_idt8" name="j_idt8" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />
<span style=" font-size: 20px; font-weight: normal;">SCOTT </span><input type="submit" name="j_idt8:j_idt10" value="Logout" style=" font-size: 20px;" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
                </div>
            </h1>
    </div>
    <div>
        <div id="left">

<form id="j_idt14" name="j_idt14" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt14" value="j_idt14" />

                        <center>
<script type="text/javascript" src="/WebApplication8/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development"></script>
<a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt16':'j_idt14:j_idt16'},'');return false">Design</a> | <a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt18':'j_idt14:j_idt18'},'');return false">Admin</a> | <a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt20':'j_idt14:j_idt20'},'');return false">Queries</a><br />
                        <hr />

                        </center><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
        </div>
        <div id="content" class="left_content">
                Welcome Report Designer!<br /><br />

                <div id="fileUpload">



                    <form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">

                        <b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />

                        Please specify a file:<input type="file" name="file" size="40" /><br />
                        Number of parameters: <select name="numSelect" onchange="draw_param_dropdowns();">
                                                    <option>0</option>
                                                    <option>1</option>
                                                    <option>2</option>

                                                    <option>3</option>
                                                    <option>4</option>
                                              </select><br />

                                              <select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">


                                                        function draw_param_dropdowns(){

                                                      var sel = document.getElementById("select1");
                                                      sel.style = "visibility:visible";
                                                    }

    </script>

                        <input type="submit" value="Upload" />

                    </form>

                </div>
        </div>
    </div>
</body>

</html>

Your markup has an XML declaration, an XHTML doctype declaration, and it makes use of namespaces. As such, it probably has to be well-formed, valid XHTML, which it is not: for starters, it is missing an </html> — Richard JP Le Guen
– Richard JP Le Guen, Commented Mar 17, 2011 at 15:35
Yeah, that ain’t HTML. What HTML does the browser see? Do a ‘View Source’ and post that code. — Paul D. Waite
– Paul D. Waite, Commented Mar 17, 2011 at 15:52
ok will do, also @LeguRi there is an </html> tag closing the page somehow it just didn't copy paste properly — ScottC
– ScottC, Commented Mar 17, 2011 at 16:32

Gobbledigook · Accepted Answer · 2011-03-17 19:40:25Z

1

You could try to do it in a sort of a loop with a modification to your style tag, since it looks like you want the user to input something, I'll use input tags.
So for instance you have:

<select name="numSelect" id = "numSelect" onchange="draw_param_dropdowns();">
                                                <option>0</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                          </select>
<!-- Create all the boxes for input and hide them initially -->
<select name="select1" id="select1" style="display:none;"><option></option></select>
<select name="select2" id="select2" style="display:none;"><option></option></select>
...

And for your javascript:

<script type="text/javascript" >
//Loop through the drop down boxes and hide them all.
//This will ensure that you don't have 'leftover' boxes after selecting
function draw_param_dropdowns() {
        for (var x = 1; x <= 4; x++) {
            document.getElementById('select' + x).style.display='none';
        }

        for (var y = 1; y <= document.getElementById("numSelect").selectedIndex; y++) {
            document.getElementById('select' + y).style.display = 'block';
        }
    }
</script>

It may be a bit longer than what some of the other coders at SO can do, but hopefully this leads to more understanding.

edited Mar 17, 2011 at 19:40

answered Mar 17, 2011 at 15:52

Gobbledigook

4721 gold badge6 silver badges20 bronze badges

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

6 Comments

ScottC Over a year ago

let me give it a try, they do have to be select elements though as I want to strictly limit the choices of the user, but I will try this

ScottC Over a year ago

ok I tried it and I get a javascript error in firebog saying that numSelect is not defined

Gobbledigook Over a year ago

I added the id tag to numselect from your code itself. From your <select name="numselect"> I added the id="numselect" as well. Is that added into the code?

ScottC Over a year ago

yes I have both name and id attribs with the same value numSelect

Gobbledigook Over a year ago

@ScottC - Sorry for the misinformation before. I went ahead and created this on my local machine, and decided to test it out. The edited results are above. I have tested this on my local machine and it's working. Just be sure to add the other 2 select boxes before compiling or it will fail.

|

Collectives™ on Stack Overflow

dynamically add <select> boxes with javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related