Menu
I am trying to make a dynamic input form as part of a project. The form needs to be able to create new inputtextareas and selection combobox when an ‘add button’ is pressed and delete them also if necessary. After pressing the add button a <br> must permit a new line to add a new group of input areas.
I have the following code but does not work as needed.
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>add/subtract textareas</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<style type=”text/css”>
<!–
fieldset {
width:395px;
border:3px double #000;
margin:50px auto;
}
legend {
margin-left:10px;
}
#butts {
padding:10px 0 10px 0;
text-align:center;
}
#txtara {
width:385px;
margin:auto;
}
#txtara textarea {
overflow:auto;
margin:5px;
float:left;
}
#clear {
height:10px;
font-size:0;
clear:both;
}
–>
</style>
<script type=”text/javascript”>
<!–
var br=new Array();
var ta=new Array();
var so=new Array();
var so2=new Array();
var n=0;
window.onload=function() {
inp=document.getElementsByTagName(‘input’);
for(c=0;c<inp.length;c++) {
if(inp[c].value==’add’) {
inp[c].onclick=function() {
ta[n]=document.createElement(‘input’);
ta[n].setAttribute(‘rows’,5);
ta[n].setAttribute(‘cols’,20);
ta[n].name=’box’+n;
document.getElementById(‘txtara’).appendChild(ta[n]);
so[n]=document.createElement(‘select’);
so[n].options[0]=new Option(“”, “”, true, false);
so[n].options[1]=new Option(“(“, “(“, false, false);
document.getElementById(‘opt’).appendChild(so[n]);
so2[n]=document.createElement(‘select’);
so2[n].options[0]=new Option(“Fecha de Nacimiento”, “fecha_nac”, true, false);
so2[n].options[1]=new Option(“Nombre”, “nombre”, false, false);
so2[n].options[2]=new Option(“e-Mail”, “email”, false, false);
document.getElementById(‘opt’).appendChild(so2[n]);
br[n]=document.createElement(‘br’);
document.getElementById(‘break’).appendChild(br[n]);
n++;
}
}
if(inp[c].value==’subtract’) {
inp[c].onclick=function() {
if(n<1) {
return;
}
document.getElementById(‘txtara’).removeChild(ta[n-1]);
document.getElementById(‘opt’).removeChild(so[n-1]);
document.getElementById(‘break’).removeChild(br[n-1]);
if(n>0) {
n–;
}
}
}
}
}
//–>
</script>
</head>
<body>
<form action=”http://www.google.com” method=”get”>
<fieldset>
<legend>textareas</legend>
<div id=”butts”>
<input type=”button” value=”add”>
<input type=”button” value=”subtract”>
<input type=”submit” value=”submit”>
</div>
<div id=”opt”></div> <div id=”txtara”></div> <div id=”break”></div>
<div id=”clear”></div>
</fieldset>
</form>
</body>
</html>
Hope you guys can help me.
Thank you very much.