add modules dynamically

sukanya.paul · March 6, 2009

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>

Psycho · March 6, 2009

Don't take this the wrong way, but that code is not very organized. There is absolutely no formatting to show logical flow and there is a ton of unnecessary code. That makes it difficult for anyone to analyze the code and provide help.

Fortunately I was bored and didn't feel like working today. This will do what you want, but for some reason the names for the sub fields at levels 2 & 3 are getting some odd numbers in the indexes for their names. (I created all the input fields with names that will be parsed as arrays when POSTed) But, the names are in a logical order that you can parse.

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

//========================================
// BEGIN SUPPORTING FUNCTIONS
//========================================

function divObj(level)
{
    var divObj = document.createElement('div');
    divObj.addBR     = _addBR;
    divObj.addButton = _addButton;
    divObj.addLabel  = _addLabel;
    divObj.addInput  = _addInput;
    divObj.style.marginLeft = (level*20)+'px';
    divObj.style.whiteSpace = 'nowrap';
    return divObj;
}

function _addLabel(text, style)
{
    textObj = document.createTextNode(text);
    fontObj = document.createElement("font");
    fontObj.setAttribute('style', style);
    fontObj.appendChild(textObj);
    this.appendChild(fontObj);
    return;
}

function _addInput(name, style)
{
    var inputObj = document.createElement('input');
    inputObj.setAttribute('type', 'text');
    inputObj.setAttribute('style', style);
    inputObj.setAttribute('size', '80');
    inputObj.setAttribute('name', name);
    this.appendChild(inputObj);
    return;
}

function _addBR()
{
    this.appendChild(document.createElement('br'));
    return;
}

function _addButton(text, action)
{
    var bttnObj = document.createElement('button');
    bttnObj.setAttribute('type', 'button');
    bttnObj.setAttribute('style', 'margin-left:5px;');
    bttnObj.setAttribute('value', '');
    bttnObj.onclick = new Function(action);
    bttnObj.appendChild(document.createTextNode(text));
    this.appendChild(bttnObj);
    return;
}

function insertAfter(referenceNode, newNode)
{
    referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}

function nodeIndex(nodeObj)
{
    for (var i=0; i<nodeObj.parentNode.childNodes.length; i++)
    {
        if (nodeObj.parentNode.childNodes[i]==nodeObj)
        {
            return i;
        }
    }
}

//========================================
// END SUPPORTING FUNTIONS
//========================================

function addModule(modElem)
{
    var newDivObj = new divObj(0)

    newDivObj.addBR();
    newDivObj.addLabel('Module: ', 'color:#000066;font-size:10pt;font-weight:normal;');
    newDivObj.addInput('module[]');
    newDivObj.addButton('+', 'addSubModule(this, 1)');
    newDivObj.addButton('-', 'removeElement(this)');
    newDivObj.addBR();
    newDivObj.addButton('ADD', 'addModule(this)');
    newDivObj.addBR();
    insertAfter(modElem.parentNode, newDivObj)
    return;
}

function addSubModule(modElem, level)
{
    var parentObj = modElem.parentNode;
    var inputName = '';

    switch(level)
    {
        case 3:
            subModule2ID = nodeIndex(parentObj);
            parentObj = parentObj.parentNode;

            inputName = '['+ subModule2ID +']' + inputName;
        case 2:
            subModule1ID = nodeIndex(parentObj);
            parentObj = parentObj.parentNode;

            inputName = '['+ subModule1ID +']' + inputName;
        case 1:
            moduleID = nodeIndex(parentObj);

            inputName = 'subModule['+ moduleID +']' + inputName;
            break;
    }

    var newDivObj = new divObj(level);
    newDivObj.addLabel('Sub Module (lev '+level+'): ', 'color:#000066;font-size:10px;font-weight:normal;');
    newDivObj.addInput(inputName+'[]');
    if (level<3)
    {
        newDivObj.addButton('+', 'addSubModule(this, '+(level+1)+')');
    }
    newDivObj.addButton('-', 'removeSec(this)');
    newDivObj.addBR();
    modElem.parentNode.appendChild(newDivObj);
}


</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="modules" width='100%'>
        <div id="module_1">
        Module: <input type="text" name="module[]" id="module_1" />
        <button style="margin-left: 5px;" type="button" onclick="addSubModule(this, 1);">+</button>
        <button style="margin-left: 5px;" type="button">-</button>
        <br>
        <button value="" style="margin-left: 5px;" name="" type="button" onclick="addModule(this)">ADD</button>
        </div>
      </div>
    </td>
  </tr>
</table>
</form>

sukanya.paul · March 9, 2009

Thanks a lot for your help.. ur right abt code being disorganised... but thats really because it's all self learned and no one to guide me.. but thats not an excuse..

But seriously i have another issue..

i need all the modules and submodules to have different names.. like module,submodule,sub1module and sub2module and then be able to retrieve the values so that i can put them in db.

can u tell me how i can achieve that?

I had used foreach($_POST as $k=>$v) and then checked for the value of k and was able to differentiate the posts according to name.

but in ur code i get the values as array so a little confused.

i shall post the code i had used initially if you could tell me how to better it it'll be helpful.

foreach($_POST as $k=>$v)
{
if($k !="submit")
{
//echo $k ."-->". $v."<br>";
	if( substr($k,0,3)=='mod' && substr($k,0,3)!='')
	{
	$sql=mysql_query("INSERT INTO stdfeat_mod (pId,modName)VALUES('$maxPId','$v')");
	$query = "SELECT MAX(mId) FROM stdfeat_mod"; 

	$result = mysql_query($query) or die(mysql_error());

		while($row = mysql_fetch_array($result))
		{
			$maxId=$row['MAX(mId)'];

		}

	}
	if( substr($k,0,3)=='Sec' && substr($k,0,3)!='')
			{
			$sql=mysql_query("INSERT INTO stdfeat_sec (pId,mId,secName)VALUES('$maxPId','$maxId','$v')");
			$query = "SELECT MAX(sId) FROM stdfeat_sec"; 

			$result = mysql_query($query) or die(mysql_error());

				while($row = mysql_fetch_array($result))
				{
					$maxSId=$row['MAX(sId)'];

				}
			}
	if( substr($k,0,4)=='Sub1' && substr($k,0,4)!='')
			{
			$sql=mysql_query("INSERT INTO stdfeat_sub1 (sId,pId,mId,sub1Name)VALUES('$maxSId','$maxPId','$maxId','$v')");
			$query = "SELECT MAX(sub1Id) FROM stdfeat_sub1"; 

			$result = mysql_query($query) or die(mysql_error());

				while($row = mysql_fetch_array($result))
				{
					$maxSub1Id=$row['MAX(sub1Id)'];

				}
			}
	if( substr($k,0,4)=='Sub2' && substr($k,0,4)!='')
			{
			$sql=mysql_query("INSERT INTO stdfeat_sub2 
			(sub1Id,sId,pId,mId,sub2Name)VALUES('$maxSub1Id','$maxSId','$maxPId','$maxId','$v')");

			}

}

Psycho · March 9, 2009

The results should be posted in a multidimensional array such that each sub-module is in a different dimensions. Top level would be module, next level would be submodule1, next is submodule2, etc.

Sign In

add modules dynamically

Recommended Posts

sukanya.paul

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

sukanya.paul

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information