SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Threaded View

  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


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
  •