PDA

View Full Version : add modules dynamically



sukanya.paul
03-06-2009, 12:38 PM
hi,

i have a form in which i am trying to add multiple modules and submodules dynamically. initially everythin was working but now the problem is that i have to add modules between 2 modules.
for example if i have added 4 modules and then decide to add another one between mod 1 and mod 2 then on clicking ADD button beside mod1 a new module should appear just after mod1 and before mod2.
I am getting the modules but not able to position it.
i am posting my code here.if someone could help me out it'll be really cool. i am struggling with this but to no solution.

Thanks a lot.
Suk

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var addInput_count = 1;
var addMod_count = 2;
var addSec_count = 1;
var addSub_count_1 = 1;
var addSub_count_2 = 1;
var count=1024;
function addMod(c1) {
c = addMod_count++;
var parent = document.getElementById('new_mod_div_' + c1)
var objBr = document.createElement('br');
var objNew1 = document.createElement('div');
objNew1.setAttribute('name', 'new_mod_div_' + c);
objNew1.setAttribute('id', 'new_mod_div_' + c);
var new_mod_id = 'new_mod_div_' + c ;
var objNew = document.createElement('div');
objNew.setAttribute('name', 'mod_div_' + c);
objNew.setAttribute('id', 'mod_div_' + c);
var mod_id = 'mod_div_' + c ;
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'text');
objInput1.setAttribute('style','margin-left:50px;');
objInput1.setAttribute('size','80');
objInput1.setAttribute('name', 'module_' + c);
var objB = document.createElement('button');
objB.setAttribute('type', 'button');
objB.setAttribute('name', 'addSec'+c);
objB.setAttribute('style', 'margin-left:5px;');
objB.setAttribute('value', '');
objB.onclick = new Function('addSec_fn('+c+')');
objB.appendChild(document.createTextNode('+'));
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remMod'+c);
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', '');
objC.onclick = new Function('removeElement('+c+')');
objC.appendChild(document.createTextNode('-'));
var objD = document.createElement('button');
objD.setAttribute('type', 'button');
objD.setAttribute('name', 'remMod'+c);
objD.setAttribute('style', 'margin-left:5px;');
objD.setAttribute('value', '');
objD.onclick = new Function('addMod('+c+')');
objD.appendChild(document.createTextNode('ADD'));
objNew.appendChild(document.createElement('br'));
var myText = document.createTextNode("Module: ");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNew1.appendChild(objD);
objNew.appendChild(font);
objNew.appendChild(objInput1);
objNew.appendChild(objB);
objNew.appendChild(objC);
objNew.appendChild(objNew1);
objNew.appendChild(document.createElement('br'));
parent.appendChild(objNew);
}
function addSec_fn(c) {
var count=0;
var s = addSec_count++;
var parent1 = document.getElementById('mod_div_' + c)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sec_div_' + c+'_'+s);
objNewsec.setAttribute('id', 'sec_div_' + c+'_'+s);
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remMod'+c);
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', '');
objC.onclick = new Function('removeSec('+c+','+s+')');
objC.appendChild(document.createTextNode('-'));
var objD = document.createElement('button');
objD.setAttribute('type', 'button');
objD.setAttribute('name', 'addSub'+c);
objD.setAttribute('style', 'margin-left:5px;');
objD.setAttribute('value', '');
objD.onclick = new Function('addSub_fn1('+c+','+s+')');
objD.appendChild(document.createTextNode('+'));
var myText = document.createTextNode("Sub Module(lev 1):");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNewsec.appendChild(font);
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'Section-'+c +'_'+s);
objInput2.setAttribute('style','margin-left:75px;');
objInput2.setAttribute('size','80');
objNewsec.appendChild(objInput2);
objNewsec.appendChild(objD);
objNewsec.appendChild(objC);
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
function addSub_fn1(c,s) {
var count=0;
var s1 = addSub_count_1 ++;
var parent1 = document.getElementById('sec_div_' + c+'_'+s)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sub1_div_' + c+'_'+s+'_'+s1);
objNewsec.setAttribute('id', 'sub1_div_' + c+'_'+s+'_'+s1);
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remSub1'+c);
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', '');
objC.onclick = new Function('removeSub1('+c+','+s+','+s1+')');
objC.appendChild(document.createTextNode('-'));
var objD = document.createElement('button');
objD.setAttribute('type', 'button');
objD.setAttribute('name', 'addSub1'+s1);
objD.setAttribute('style', 'margin-left:5px;');
objD.setAttribute('value', '');
objD.onclick = new Function('addSub_fn2('+c+','+s+','+s1+')');
objD.appendChild(document.createTextNode('+'));
var myText = document.createTextNode("Sub Module(lev 2):");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNewsec.appendChild(font);
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'Sub1-'+c +'_'+s+'_'+s1);
objInput2.setAttribute('style','margin-left:100px;');
objInput2.setAttribute('size','80');

objNewsec.appendChild(objInput2);
objNewsec.appendChild(objD);
objNewsec.appendChild(objC);
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
function addSub_fn2(c,s,s1) {
var count=0;
var s2 = addSub_count_2 ++;
var parent1 = document.getElementById('sub1_div_' + c+'_'+s+'_'+s1)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sub2_div_' + c+'_'+s+'_'+s1+'_'+s2);
objNewsec.setAttribute('id', 'sub2_div_' + c+'_'+s+'_'+s1+'_'+s2);
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remSub2'+c);
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', '');
objC.onclick = new Function('removeSub2('+c+','+s+','+s1+','+s2+')');
objC.appendChild(document.createTextNode('-'));
var objD = document.createElement('button');
objD.setAttribute('type', 'button');
objD.setAttribute('name', 'addSub2'+s1);
objD.setAttribute('style', 'margin-left:5px;');
objD.setAttribute('value', '');
objD.onclick = new Function('addSub_fn2('+c+','+s+','+s1+')');
objD.appendChild(document.createTextNode('+'));
var myText = document.createTextNode("Sub Module(lev 3):");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNewsec.appendChild(font);
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'Sub2-'+c +'_'+s+'_'+s1+'_'+s2);
objInput2.setAttribute('style','margin-left:125px;');
objInput2.setAttribute('size','80');
objNewsec.appendChild(objInput2);
objNewsec.appendChild(objC);
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
</script>
</head>
<body >
<form method="POST" name="form1" action="form_dyn.php" >
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="mod_div_1" width='100%'>
Module: <input type="text" name="module_1" id="module_1" />
<button value="" style="margin-left: 5px;" name="addSec1" type="button" onclick="addSec_fn(1)">+</button>
<button value="" style="margin-left: 5px;" name="remMod1" type="button">-</button>
</div>
<div id="new_mod_div_1">
<button value="" style="margin-left: 5px;" name="remMod1" type="button" onclick="addMod(1)">ADD</button>
</div>
</td>
</tr>
</table>
</form>