i ve been working on the following for more than 4 days .
FInally i got what i want but whar is missing is how how can i get those dynamically textboxes / Dropdowns strored or capture and stored into a database table.
what my code does :
Un employee can go and select projects he is working on then the current 6 months time assignment to this project :
each row or line is 1 project with respectibe assignment time. The employee can add / Remove any assignment by clicking “+” or “-”
You can test my code in the following portal : Tryit Editor v1.4
here is my code . I want to captire those values and store them in a database table.
Iam using Coldfusion but this code mostkly works with HTML and Javascript.
than you
Code :
<!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>
<link href="tabs.css" rel="stylesheet" type="text/css" />
<!---<script src="../component/js/addOnloadEvent.js" type="text/javascript" language="JavaScript"></script>
<script src="../component/js/popcalendar.js" type="text/javascript" language="JavaScript"></script>--->
</head>
<body>
<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#]= "#PROGRAMID#";
ITEM[#count#]= "#PROGRAMNAME#";
<cfset count = count +1>
</cfloop>
</script>
<script type="text/javascript">
var counter = 0;
function addNew()
{
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
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:400px");
//firefox
newDDL.setAttribute("width","400px");
newDDL.style.width = "400px";
// 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]
newDDL.options.add(objOption)
}
newDDL.value = counter++;
newDDL.onchange = show1;
var j =1;
newStartDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newStartDate.setAttribute('id','id'+j);
newStartDate.setAttribute('name','StartDateName'+j);
newStartDate.size=8;
newStartDate.onblur = show;
// document.body.appendChild(newStartDate);
// newDiv.appendChild(newStartDate);
newEndDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newEndDate.setAttribute('id','id'+(j+1));
newEndDate.setAttribute('name','EndDateName'+ (j+1));
newEndDate.size=8;
newEndDate.onblur = show;
// 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(newDDL);
newDiv.appendChild(newStartDate);
newDiv.appendChild(newEndDate);
// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
// 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;
newDelButton.onclick = function() {mainContainer.removeChild(newDiv); };
}
function show(){
alert( 'id=' + this.getAttribute('id') + "\
" + 'name=' + this.getAttribute('name') + "\
" + "value=" + this.value );
// alert("value=" + this.value);
}
function show1(){
alert("value=" + this.value);
}
</script>
</cfoutput>
<cfform name="form1" >
<br/>
<br/>
<br/>
<div id="mainContainer">
<div>
</select><input type="button" value=" Add New Assignment " onclick="addNew();">
<br />
<br />
<!---<table border="1" cellpadding="0" cellspacing="0" width="1200px">
<tr>
<td</td>
</tr>
<tr>
<td width="260px" align="center">
Project Name
</td>
<td width="62px" align="center">
Start Date
</td>
<!---<td width="62px" align="center">
End Date
</td>
<td width="50px">
<cfset CurrentMonth = MONTH(now())>
<cfoutput>
#MonthAsString(CurrentMonth)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+1)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+2)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+3)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+4)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+5)#
</cfoutput>
</td>
<td width="50px">
Complete
</td>--->
</tr>
</table>--->
<!---<select name="ddl" style="width:250px" id="ddl">
<cfoutput query="qITEM" >
<option value="#PROJECT_ID#">#PROJECT_NAME#</option>
</cfoutput>--->
</div>
</div>
<div>
</select><input type="button" value=" Show " onclick="show();"> <input type="button" value=" Save " onclick=";">
</div>
</cfform>
</body>
</html>
database tables are stored on a server, and it is server-side code that it used to manipulate those tables.
If that’s what you want to do, then it will be a sever-side language such as PHP or ASP or .NET which is used to capture those values and store them in a database table.
Can you please guide me on how to doit in Java ?
here is my code :
<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#]= "#PROGRAMID#";
ITEM[#count#]= "#PROGRAMNAME#";
<cfset count = count +1>
</cfloop>
</script>
<script type="text/javascript">
var counter = 0;
function addNew()
{
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
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:400px");
//firefox
newDDL.setAttribute("width","400px");
newDDL.style.width = "400px";
// 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]
newDDL.options.add(objOption)
}
newDDL.value = counter++;
//newDDL.onchange = show1;
var j =1;
newStartDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newStartDate.setAttribute('id','id'+j);
newStartDate.setAttribute('name','StartDateName'+j);
newStartDate.size=8;
newStartDate.onblur = show;
// document.body.appendChild(newStartDate);
// newDiv.appendChild(newStartDate);
newEndDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newEndDate.setAttribute('id','id'+(j+1));
newEndDate.setAttribute('name','EndDateName'+ (j+1));
newEndDate.size=8;
newEndDate.onblur = show;
// 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(newDDL);
newDiv.appendChild(newStartDate);
newDiv.appendChild(newEndDate);
// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
// 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;
newDelButton.onclick = function() {mainContainer.removeChild(newDiv); };
}
function show(){
alert( 'id=' + this.getAttribute('id') + "\
" + 'name=' + this.getAttribute('name') + "\
" + "value=" + this.value );
// alert("value=" + this.value);
}
</script>
No, I can not guide you on how to do it in Java. That is a completely different language that serves a very different purpose, with virtually no overlap of any kind.
So let’s get this right. What is the language that you require help with instead?
Hi paul,
Iam using javascript and coldfusion.
Actually with code provided ican get my dynamic controls created. Inee to store thoses values into a javascript array then will use coldfusion to send them to the database.
There are several things that you have which we don’t, including the HTML content of what your script is working with, and the cold fusion side of things too.
While it’s possible for us to create our own HTML code with which to simulate something similar to what you intend to achieve, the best results will be obtained if the script can be crafted purposefully for the page that you intend to run it with.
So, if you could link us to a test page, so that the appropriate updates to the script can be most easily worked out, that would help us to help you much more efficiently.
Hi paul ,
Thank you s much for the follow up. Unfortunatey i do not have a test page where i can i show you the the result of my code…but i have joined a picture of how i want it to be…
So far i am able to create dynamic textboxes and dropdownlist in javascript.
What i need basically is how to capture those values and put them in a java script array …then will send them to databse using coldfusion lang.
i mostly concerned by the javascript part of the thing.
My javascript (please ignore the coldfusion part : it is used just to query the items i want to fill the dynamic dropdownlist with) code is below and i have also attached a picture of my local test.
thanks
<cfquery name="qITEM" datasource="emulators">
SELECT
*
FROM TBLCPR_PROJECT_MASTER
</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>
<link href="file:///C|/Documents and Settings/layachmo/Desktop/tabs.css" rel="stylesheet" type="text/css" />
<!---<script src="../component/js/addOnloadEvent.js" type="text/javascript" language="JavaScript"></script>
<script src="../component/js/popcalendar.js" type="text/javascript" language="JavaScript"></script>--->
</head>
<body>
<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#]= "#PROJECT_ID#";
ITEM[#count#]= "#PROJECT_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 holkd dynamic generated controls values
var dynamicarray = new Array(); // this one will take startdate
var counter = 0;
function addNew()
{
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
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:400px");
//firefox
newDDL.setAttribute("width","400px");
newDDL.style.width = "400px";
// 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]
newDDL.options.add(objOption)
}
newDDL.value = counter++;
newDDL.onchange = show1;
var j =1;
newStartDate = document.createElement( 'INPUT' );
//newStartDate.setAttribute('id','myfieldid'+i);
newStartDate.id = 'id' + elementid;
newStartDate.setAttribute('id1','id1');
newStartDate.setAttribute('name','StartDateName'+ elementid);
newStartDate.size=8;
newStartDate.onblur = show;
// document.body.appendChild(newStartDate);
// newDiv.appendChild(newStartDate);
// newEndDate = document.createElement( 'INPUT' );
// //newStartDate.setAttribute('id','myfieldid'+i);
// newEndDate.setAttribute('id','id'+(elementid));
// newEndDate.setAttribute('name','EndDateName'+ (elementid));
// newEndDate.size=8;
// newEndDate.onblur = show;
// 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(newDDL);
newDiv.appendChild(newStartDate);
//newDiv.appendChild(newEndDate);
// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
// 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;
newDelButton.onclick = function() {mainContainer.removeChild(newDiv); };
elementid++;
//alert(elementid++);
}
function show(){
alert( 'id=' + this.getAttribute('id') + "\
" + 'name=' + this.getAttribute('name') + "\
" + "value=" + this.value );
// alert("value=" + this.value);
}
function show1(){
alert("value=" + this.value);
}
</script>
</cfoutput>
<cfform name="form1" >
<br/>
<br/>
<br/>
<div id="mainContainer">
<div>
</select><input type="button" value=" Add New Assignment " onclick="addNew();">
<br />
<br />
<!---<table border="1" cellpadding="0" cellspacing="0" width="1200px">
<tr>
<td</td>
</tr>
<tr>
<td width="260px" align="center">
Project Name
</td>
<td width="62px" align="center">
Start Date
</td>
<!---<td width="62px" align="center">
End Date
</td>
<td width="50px">
<cfset CurrentMonth = MONTH(now())>
<cfoutput>
#MonthAsString(CurrentMonth)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+1)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+2)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+3)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+4)#
</cfoutput>
</td>
<td width="50px">
<cfoutput>
#MonthAsString(MONTH(now())+5)#
</cfoutput>
</td>
<td width="50px">
Complete
</td>--->
</tr>
</table>--->
<!---<select name="ddl" style="width:250px" id="ddl">
<cfoutput query="qITEM" >
<option value="#PROJECT_ID#">#PROJECT_NAME#</option>
</cfoutput>--->
</div>
</div>
<div>
</select><input type="button" value=" Show " onclick="show();"> <input type="button" value=" Save " onclick=";">
</div>
</cfform>
</body>
</html>
Commonly what is done is to use an event to trigger a JavaScript function. That event could be the onchange event, the onclick event, or the onsubmit event.
A reference to the element that triggered the event is passed to the function via the this keyword, and if it was a form field that triggered the event, you can gain a reference from that form field to the form itself, via the form property.
You can then add properties to the form within which you can store the data that you require.