SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Store Dynamically created Text Box values into database

    Hi Guys,

    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 :



    Code CFM:
    <!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') + "\n" +  'name=' + this.getAttribute('name') + "\n" + "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>
    Last edited by Mittineague; Aug 1, 2011 at 11:22. Reason: reformatting bbcode tags

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    I want to captire those values and store them in a database table.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    thanks for the quic reply .

    Is there a way to capture the dynamic generated values in an JS array then use the array to store values into database ?


    picture of what i am trying to do is attached
    thanks
    Attached Images Attached Images

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    Is there a way to capture the dynamic generated values in an JS array then use the array to store values into database?
    You will require server-side code for that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Paul ,
    did you check the picture i ve attached in my last post.
    i am not how can i get the total of the dynamic textboxes ..

    do you have an idea how can this be done please ?

    thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    hi Paul ,
    did you check the picture i ve attached in my last post.
    i am not how can i get the total of the dynamic textboxes ..

    do you have an idea how can this be done please ?
    Databases are not done by JavaScript. It's as simple as that.

    Anything relating to databases are done by server-side code, such as PHP, ASP or .NET
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul,
    i am not meaning database.. simply i thought that the sum of dynamic generated textboxes can be done (calculated) at Java level ...

    sorry for being unclear and thanks for you help.

    Have a good day.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    Sorry Paul,
    i am not meaning database.. simply i thought that the sum of dynamic generated textboxes can be done (calculated) at Java level ...
    Yes, that can be done, and it's JavaScript. Java is a completely different unrelated language.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you please guide me on how to doit in Java ?
    here is my code :

    [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') + "\n" + 'name=' + this.getAttribute('name') + "\n" + "value=" + this.value );
    // alert("value=" + this.value);

    }


    </script>

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    Can you please guide me on how to doit in Java ?
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thanks

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    [code]


    <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') + "\n" + 'name=' + this.getAttribute('name') + "\n" + "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>

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by korssane View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •