...

View Full Version : Dynamic Form or Div with dynamic subform or subdivs



korssane
09-28-2011, 12:54 AM
Hi All,
i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

For what i need that :

i have my user inserting information on the level 1. let say Copagny info
2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
and so on...

3- those sub level ( subforms ) can also call their respective subforms..



Any idea how to design this ?


thanks

xelawho
09-28-2011, 01:13 AM
mmm...

I suspect you mean something else, but maybe we can start here:



<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
</head>
<body>
Add names:<br>
<input type="text" style="width:400px">
<input type="button" value="Add more names" onclick="addNames()">
<div id="div2"></div>
<script type="text/javascript">
function addNames() {
var thediv=document.getElementById('div2');
var extras=document.createElement('div');
extras.innerHTML='<input type="text" style="width:400px"></input><input type="button" value="Add other names" onclick="addNames()">'
thediv.appendChild(extras);
}
</script>
</body>
</html>

korssane
09-28-2011, 03:12 AM
hi xelawho,

Thanks for your quick reply ..
what i need basically is a cascading forms ..not sure if i can share a graph .. i can show you what it looks like ???

please let me know

Old Pedant
09-28-2011, 03:41 AM
This is *probably* better done with your server side coding (PHP/ASP/JSP/etc.).

When form1 is submitted, a checkbox or radio button or something similar on that form basically tells the server side code what the next step is and, if appropriate, the server responds with the second form.

*CAN* you do it in JavaScript? Sure. But what are you going to do with all the form information you have already collected???? Can it be passed along to the next page? Yes, but it will be easier and more reliable to do it server-side.

xelawho
09-28-2011, 03:46 AM
what i need basically is a cascading forms ..not sure if i can share a graph .. i can show you what it looks like ?

you can attach a file by going to the bottom of the page when you are replying and click on Manage Attachments

although I would defer to Old Pedant's knowledge on this one (and most other ones come to think of it)

korssane
09-28-2011, 03:54 AM
I completely agree guys about using the server side lang as i fanally want to insert data into db.
The only challenege i have with server side is i have to "postback" to go to the next form or subform..thing i do not want to do
2nd i do need to generate as much as the user can subforms or sub subforms..which i believe cannot be done using server side lang?


thoughts ?

Old Pedant
09-28-2011, 04:38 AM
Well, the basics are trivial.


<form ... >

Name: <input name="name" />
Address: <input name="address" />
...

Are you interested in seeing the next sub-form?
<label>
<input type="radio" name="subf1" value="yes"
onclick="document.getElementById('subform1').style.display='block';"/> Yes
</label>
<label>
<input type="radio" name="subf1" value="no" checked="checked"
onclick="document.getElementById('subform1').style.display='none';"/> No
</label>

<div id="subform1" style="display: none;">
Enter more info:

Your annual salary, to the penny: <input name="salary" />
How much can we steal without you noticing? <input name="stealThis" />
What is your bank account number? <input name="bankAccount"/>
...
</div> <!-- end of subform1 -->
...

</form><!-- end of the entire form -->

But beyond this, you'll have to give a lot more details.

korssane
09-29-2011, 12:16 AM
Hi guys,

A picture is attached to show a flow example i want .

PLease let me know if iam unclear

the red cells are buttons where i can add / Remove the dynamic section or
control


thanks

Old Pedant
09-29-2011, 01:22 AM
Yes? How is that different in principle than the code I gave you?

Yes, you could use a button instead of radio buttons to control the appearance/disappearance of each <div>.

xelawho
09-29-2011, 01:22 AM
:eek:

do you have a smaller diagram?

seriously, I can't make out any of that - and if I zoom in it just goes blurry...

[EDIT:] you can read that, Old Pedant? Looks like I'm going to have to start deferring to you on *seeing* as well :(

korssane
09-29-2011, 02:11 AM
sorry guys,

We can see it clearly if it was an excel file but this one is not supported..

can i have your emails to send it to you as a excel ?

Thanks

xelawho
09-29-2011, 02:13 AM
why not .zip it?

but Old Pedant raises a good question - the basic example he gave can be adapted to suit your needs... or is there a problem?

korssane
09-29-2011, 02:29 AM
In Old pedant example i have a radio button that create another level of control which is great ...but in my example it is continous ...i can create 1 as i can create 10 or more and this in each level as i have 5 levels

Levl11 -- add/remove
Level12 -- add/remove
Level13 -- add/remove
Leve14 -- add/remove

Levl21 -- add/remove
Level22 -- add/remove
Level23 -- add/remove
Leve24 -- add/remove

thanks

xelawho
09-29-2011, 02:37 AM
but is it necessary to have the option of creating infinite levels? or is there some sort of limit - say level 2 only needs 3 sub-levels (which themselves only need 3 sub-sub levels)?

Old Pedant
09-29-2011, 02:39 AM
Yes, easily.

But the hard part is constructing the boxes in their fully visible form.

Will you use <div>s? Will you use <table>s?

You build the HTML without the show/hide capability and I'll help you show/hide it.

Old Pedant
09-29-2011, 02:40 AM
And it's almost surely a mistake to "create" levels. Unless you have a really good reason, create it all in advance and just hide parts of it.

korssane
09-29-2011, 02:42 AM
Personnaly i've never seen more than 10 on each level..but we never know.
I have to consider this scenario in case..things change very fast..

I was thinkingassigning level + i where i initial value is 1 and keep incrementing by 1
coz finally i need to collect those controls values and insert them into db


thoughts ??

xelawho
09-29-2011, 02:56 AM
still struggling, sorry.

Starting at the start, we have level 1.

If the user wants to add sublevels I guess we call them 1a 1b, etc

And 1a, 1b can also have sublevels?

Like 1aA, 1aB, 1BA, 1BB...

and there are 5 "top" levels: 1,2,3,4,5

but the sublevels 1a, 1b can go on forever? (but probably only to 10)

and the sub-sub levels 1aA, 1aB, 1BA can go on forever, too? (but also probably only to 10)

am I getting close?

xelawho
09-29-2011, 03:12 AM
oh, yeah...

and how far across can it go?

can there be a 1aA1 for example? and a 1aA1a? etc?

korssane
09-29-2011, 03:35 AM
Hi xelawho,
I have create this example which actuaklly create a 1st level on page load then i ll have a button to add (+) / Remove(-) same level and a 3rd one (Add 2nd lvl) to add the 2nd level

the main one is calling : addnew() function and the 2nd level one calls AddLevel2().

For the display i have a 1st level
when i add 2nd level it comes right below which great ..the problem is when i come back and try nto add a 2nd main level ..the 2nd main level is added but it comes after the 1st main one ..


below is my code

<!--- declare data source variable --->
<cfset DNS1 = "DNS"><br />

<cfquery name="qITEM" datasource='#DNS1#'>
SELECT
*
FROM TABLE
</cfquery>



<!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" />
<title>Untitled Document</title>


</head>

<body onLoad="addNew();">


<cfoutput>


<script language="JavaScript">

//store array for addresses
var rec_count = #qITEM.recordCount#;
var ID = new Array(rec_count);
var ITEM = new Array(rec_count);
//var ID2 = new Array(rec_count);

<cfset count = 0>
<cfloop query="qITEM">
ID[#count#]= "#ID#";
ITEM[#count#]= "#CIE_NAME#";
<cfset count = count +1>
</cfloop>


</script>

<script type="text/javascript">

// Declare element id for different dynamic generated controls
var elementid = 1;


// Create an array to hold dynamic generated controls values
var L1 = new Array(); // this one will take start date

var counter = 0;
//var limit = 3;

function AddLevel2()

{
var mainContainer2 = document.getElementById('mainContainer2');
var newDiv = document.createElement('div')
var newDDL2 = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
newDDL2.setAttribute("style","width:300px");
//firefox
newDDL2.setAttribute("width","300px");
newDDL2.style.width = "300px";
newDDL2.id = 'id' + elementid ;
newDDL2.setAttribute('name','newDDL'+ elementid);

// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=rec_count;i++)
{
objOption = document.createElement('option')
objOption.text = ITEM[i];
objOption.value=ITEM[i];
newDDL2.options.add(objOption);
}


counter++;

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";

// Append new text input to the newDiv

newDiv.appendChild(newDDL2);
//newDiv.appendChild(newStartDate);

// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);

// Append newDiv input to the mainContainer div
mainContainer2.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = AddLevel2;
//newAddButton.onclick = AddNewRecord;


newDelButton.onclick = function() {mainContainer2.removeChild(newDiv);}
//elementid=elementid-1;
elementid++;



}

function addNew()
{
var ColumnElement = 1;
var mainContainer = document.getElementById('mainContainer');

// Create a new div for holding text and butt var newform = document.createElement('form');
var newDiv = document.createElement('div');

// Create a new drop down list -- for text box use 'input' instead of 'select'
var newDDL = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
newDDL.setAttribute("style","width:300px");
//firefox
newDDL.setAttribute("width","300px");
newDDL.style.width = "300px";
newDDL.id = 'id' + elementid + ColumnElement;
newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement);

// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=rec_count;i++)
{
objOption = document.createElement('option')
objOption.text = ITEM[i];
objOption.value=ITEM[i];
newDDL.options.add(objOption);
}


counter++;

var j =1;
var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e";

newStartDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newStartDate.id = 'id' + elementid + (ColumnElement+1);
//newStartDate.id = 'id1';
//newStartDate.name = 'StartDateName'+ elementid+(ColumnElement+1);
//newStartDate.setAttribute('id','id'+ elementid+(ColumnElement+1));
//newStartDate.setAttribute('id1','id1');
newStartDate.setAttribute('name','StartDateName'+ elementid+(ColumnElement+1));
newStartDate.setAttribute('type', 'Date');
newStartDate.size=6;
newStartDate.style.backgroundColor= bgc;


// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";

var newAddButton2 = document.createElement('input');
newAddButton2.type = "button";
newAddButton2.value = "Add 2nd lvl";

// Append new text input to the newDiv
newDiv.appendChild(newDDL);
newDiv.appendChild(newStartDate);

// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
newDiv.appendChild(newAddButton2);

// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = addNew;
//newAddButton.onclick = AddNewRecord;

newDelButton.onclick = function() {mainContainer.removeChild(newDiv);}
//elementid=elementid-1;

newAddButton2.onclick = AddLevel2;
elementid++;
//alert(elementid++);

}




</script>


</cfoutput>

<div align="left">

<table width="100%" height="100px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="../media/images/spacer.gif" height="10" width="540"></td>
</tr>
<tr>
<td rowspan="3"><img src="../media/images/spacer.gif" height="10" width="10"></td>
<td width="10"><img src="../media/images/content-top-lt.gif" height="10" width="10"></td>
<td width="95%" background="../media/images/content-top.gif"></td>
<td width="10"><img src="../media/images/content-top-rt.gif" height="10" width="10"></td>
<td rowspan="3"><img src="../media/images/spacer.gif" height="10" width="10"></td>
</tr>
<tr>
<td width="10" background="../media/images/content-side-lt.gif">&nbsp;</td>
<td height="100px">

<cfform name="form1" ACTION="insertalloc.cfm" METHOD="post">

<div id="mainContainer">

</div>
<div id="mainContainer2">

</div>

<!--- Check & save buttons--->
<div>
<div>
<p>
<input type="button" value="Check" title="Check Monthly Total Assignment" style="background-color:#C8BBD0" onClick="Check();">
<input type="submit" name="SubmitForm" value=" Save " title="Save to database" style="background-color:#C8BBD0">
</p>
</div>
<!---hidden controls--->
<input type="hidden" id="NumberOfElementsid" name="NumberOfElementsName">
<input type="hidden" id="NumberOfColumnid" name="NumberOfColumnName">


</cfform>

</td>

<td width="10" background="../media/images/content-side-rt.gif">&nbsp;</td>
</tr>
<tr>
<td width="10"><img src="../media/images/content-bot-lt.gif" height="16"></td>
<td background="../media/images/content-bot.gif"></td>
<td width="10"><img src="../media/images/content-bot-rt.gif" height="16"></td>
</tr>
</table>

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

thanks

korssane
09-29-2011, 03:37 AM
sorry did not answer your question..

lets assume that each level can go to 10. it is better tomake it generic using a loop or something like this.

xelawho
09-29-2011, 04:03 AM
where should the second main level go? to the right of the first one?

wouldn't it just be a case of floating the parent divs left?

korssane
09-29-2011, 04:19 AM
can we define a limit as a varibale that we initiate the value..? if this cannot be done..i ll go with 5-6 subs at each level. coz from my own experience i ve never seenmore than 5 or 6.

thanks

Old Pedant
09-29-2011, 06:33 AM
What I am 100% lost on is this: WHAT CONTENT will you put in the new levels???

Where does the DATA for each new level come from?

Since you are using ColdFusion and you have a data source, my *suspicion* is that the data is to come from the data base/data source.

But if that is so, then you *MUS** do the expanding by sending a message *BACK* to the CF page asking it to get MORE data and asking it to create the new levels.

korssane
09-29-2011, 02:18 PM
For the content, i will have form controls (Textbox, dropdownlist, textarea,.. ) coz the vaulue will be submitted to the database..( one way : i am not looking to pull data from the db )

thanks

Old Pedant
09-29-2011, 09:22 PM
AHHH...*NOW* it begins to make sense!

Well, I'd still like to see an example of an already-expanded page. That is, where you already have, say, 3 levels. I want to see what you expect the FINISHED html to look like.

I assume that different sub-levels will have different kinds of HTML content? Or not so?

Another question that would be answered by some sample finished html.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum