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 SO 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&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>
1 answers
solution1
1 ACCPTED 2011-03-17 15:52:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to validate dynamically created select boxes in javascript?
Add the Values of Text boxes dynamically with Javascript
Adding select boxes dynamically
React dynamically add x amount of select boxes for filtering data
Dynamically Add Select Options with Javascript
dynamically add check boxes based upon array value javascript
Add Validation to dynamically created text boxes JavaScript PHP
Javascript onchange select boxes
Javascript multiple select boxes
How to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
Related Tags