www.webdeveloper.com
Results 1 to 14 of 14

Thread: Dynamically add textbox for user entry and saving data entered

  1. #1
    Join Date
    Jun 2005
    Posts
    97

    Question Dynamically add textbox for user entry and saving data entered

    I have an ASP page that displays, along with other data, a list of items that refer to a specific element in a database. Instead of adding an Add button, I would like to display a text box below the last item in the list to have the user input any new data. Once they enter the data and hit Enter, the data they enter should then be added to the list and another text box added beneath this item (just as forms and table in Access do).
    However, I'm not sure how to implement this functionality. Can someone please help me out?


    Chris Cote

  2. #2
    Join Date
    Apr 2009
    Posts
    48
    you can use DOM for implementing such functionality.
    1. attach a function on click button
    2.do following things in your function
    i. get value entered by user.
    ii. modify table using dom.
    iii. submit this value to the server and save in database using xmlhttprequest(if you want so).

  3. #3
    Join Date
    Jun 2005
    Posts
    97
    OK, but how would I do the last 2 items. Do you have some sample code I can look at?

    Chris

  4. #4
    Join Date
    Apr 2009
    Posts
    48
    show me your current code. I will tell you what to do next.

  5. #5
    Join Date
    Jun 2005
    Posts
    97
    Here's what I have so far using ASP to populate the list:

    Code:
    <%@ Language="VBScript" %>
    <%Option Explicit %>
    <!-- #INCLUDE FILE="DBString.inc" -->
    <%
        Dim ecNum, id, newUpdate, sClassType, sClass, cableID, ecCount
        Dim sSql, rsResult, rsECNums, rsDocTypes
        Dim ecpID, ecID
        Dim ecp, title, desc
        Dim rsCN
        
        ecpID = Request.QueryString("ecpID")
        if ecpID <> "" then
            sSql = "SELECT dbo.tblCN.cnNumber FROM dbo.tblCN WHERE (((dbo.tblCN.ecpID)="&ecpID&")) ORDER BY dbo.tblCN.CN_id;"
            set rsCN = objConn.Execute(sSql)
        end if
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>CN Form</title>
        <LINK rel="stylesheet" type="text/css" href="dataview2.css"/>
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
        <script type="text/javascript">
            function addCN() {
                var newCN;
                newCN = document.getElementById("newCN").value;
                alert(newCN);
            }
        </script>
    </head>
    <body>
        <form id="form1" action="ECD_propsSubform.asp" method="post">
            <input type="hidden" name="id" value="" />
            <table>
                <tr>
                    <td><b>Associated<br />Change Notices</b></td>
                </tr>
                <tr>
                    <td><u>CN Number</u></td>
                </tr>
                <%if ecpID<>"" then
                Do while not rsCN.EOF %><tr>
                    <td><%=rsCN("cnNumber") %></td>
                </tr>
                <%  rsCN.moveNext
                  Loop
                  end if %>
                  <tr>
                    <td><input type="text" id="newCN" value="" size="3" class="text" />&nbsp;<input type="button" onclick="javascript:addCN()" id="add" value="+" /></td>
                  </tr>
            </table>
        </form>
    </body>
    </html>

  6. #6
    Join Date
    Jun 2005
    Posts
    97
    OK, I'm trying to use innerHTML to add rows to the table, but the data I enter into the text box is appearing above the table instead of in the table. Can you please take a look to see what I'm doing wrong?
    HTML Code:
    <html>
    <head>
        <title>Cable Editing Form</title>
        <LINK rel="stylesheet" type="text/css" href="dataview2.css"/>
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
        <script type="text/javascript">
            function addCN() {
                var newCN, newVals, currVals;
                newCN = document.getElementById("newCN").value;
                currVals = document.getElementById("newValues").value+","+newCN;
                newVals = document.getElementById("newVals").innerHTML;
                document.getElementById("newVals").innerHTML = newVals+"<tr><td>"+newCN+"</td></tr>";
            }
        </script>
        <style type="text/css">
            body {
                font-size:10pt;        
            }
            input.text{
                font-size:8.5pt;
                font-family:"Times New Roman";
                height:8.6pt;
            }
            input.file {
                font-size:10pt;
                font-family:"Times New Roman";
                height:9.5pt;
            }
            select {
                font-size:10pt;
                font-family:"Times New Roman";
                height:14pt;
            }
            textarea {
                font-size:10pt;
                font-family:"Times New Roman";
            }
        </style>
    </head>
    <body>
        <form id="form1" action="ECD_propsCNSub.asp" method="post">
            <input type="hidden" name="id" value="" />
            <table>
                <tr>
                    <td><b>Associated<br />Change Notices</b></td>
                </tr>
                <tr>
                    <td><u>CN Number</u></td>
                </tr>
                  <div id="newVals"></div>
                  <input type="hidden" name="newValues" id="newValues" />
                  <tr>
                    <td><input type="text" id="newCN" value="" size="3" class="text" />&nbsp;<input type="button" onclick="javascript:addCN()" id="add" value="+" /></td>
                  </tr>
            </table>
        </form>
    </body>
    </html>

  7. #7
    Join Date
    Apr 2009
    Posts
    48
    I made few changes in your function. Check it, I think it should work. also change table id.

    function addCN() {
    var newCN;
    newCN = document.getElementById("newCN").value;
    var tableRef = document.getElementById('myTable');
    var rowCount = tableRef.getElementsByTagName("TR").length;
    var newRow = tableRef.insertRow(rowCount);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(newCN);
    newCell.appendChild(newText);
    }

  8. #8
    Join Date
    Jun 2005
    Posts
    97
    Thank you for such a quick reply. I had to make one minor adjustment to the script to have the new values appear above the text box, by adding a -1 after the ("TR").length. I also added a line of code to add the new value to my hidden field. How would I use xmlhttpRequest to add it to the database right away? Since this is actually a subform of another form, I think it would be easier to simply add it when they click the plus button.
    Now my next question is, if I had a row with 2 columns, would I simply add another insertCell call, or does the attribute just change to 1 and how would I add the separate values. Also, will this work in IE 7 or 6?

    Chris
    Last edited by chrscote; 05-06-2009 at 09:58 AM. Reason: Added another question

  9. #9
    Join Date
    Apr 2009
    Posts
    48
    for adding another cell just add insertCell & document.createTextNode(new cell value). also it would work with IE 6, 7. If you will have any problem you can tell us. for storing values to database you have to do following things.
    1. store value to some variable.
    2. create xmlHttp object.
    3.create a connection and send data to a server side script.
    4. server side script will receive data and store it to you database.

    let me know if you have any problem.

  10. #10
    Join Date
    Jun 2005
    Posts
    97
    Thank you very much. It works great!!
    Now, though, I have a similar question. I now want to also add a - button next to each table row to allow users to delete the data for that row. I've got the DB stuff working great and I'm using the deleteRow fine using the row number. However, the problem I have is that, after deleting a row from the top of the list, any time I try to delete another row below the previously deleted one, the wrong row is deleted. Is there a way to determine which row you're actually clicking in the Javascript? Or maybe a way to change the row number in the function call?

    Here's the code I'm using:
    HTML Code:
    <%@ Language="VBScript" %>
    <%Option Explicit %>
    <!-- #INCLUDE FILE="DBString.inc" -->
    <%
        Dim ecNum, id, newUpdate, sClassType, sClass, cableID, ecCount
        Dim sSql, rsResult, rsECNums, rsDocTypes
        Dim ecpID, ecID
        Dim ecp, title, desc
        Dim rsCN
        Dim rowNum
        rowNum = 2
        ecpID = Request.QueryString("ecpID")
        if ecpID <> "" then
            sSql = "SELECT dbo.tblCN.cnNumber, dbo.tblCN.CN_id FROM dbo.tblCN WHERE (((dbo.tblCN.ecpID)="&ecpID&")) ORDER BY dbo.tblCN.CN_id;"
            set rsCN = objConn.Execute(sSql)
        end if
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Cable Editing Form</title>
        <script type="text/javascript">
            function addCN() {
                var newCN;
                if (document.getElementById("ecpID").value!="") {
                    newCN = document.getElementById("newCN").value;
                    var tableRef = document.getElementById('myTable');
                    var rowCount = tableRef.getElementsByTagName("TR").length-1;
                    var newRow = tableRef.insertRow(rowCount);
                    var newCell = newRow.insertCell(0);
                    var newText = document.createTextNode(newCN);
                    newCell.appendChild(newText);
                    document.getElementById("cnNum").value=newCN;
                    ajaxFunction("a");
                }
            }
            function removeCN(id, row) {
                var rowNum;
                var CN_id;
                
                CN_id = id;
                rowNum = row;
                var tableRef = document.getElementById('myTable');
                tableRef.deleteRow(rowNum);
                ajaxFunction("d", CN_id);
            }
            function ajaxFunction(addDel, id) {
                var xmlhttp;
                
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    alert("Your browser does not support XMLHTTP!");
                }
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4) {
                        document.getElementById("newCN").value="";
                    }
                }
                if (addDel=="a") {
                    cnNum = document.getElementById("cnNum").value;
                    ecpID = document.getElementById("ecpID").value;
                    url = "ECD_CNAdd.asp?ad=a&cnNum="+cnNum+"&ecpID="+ecpID
                    //alert(url);
                } else {
                    var CNID = id;
                    if (CNID!=null) {
                        url = "ECD_CNAdd.asp?ad=d&cnID="+CNID
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send(null);
            }
        </script>
    </head>
    <body>
        <form id="form1" action="ECD_propsCNSub.asp" method="post">
            <input type="hidden" id="ecpID" name="ecpID" value="" />
            <table id="myTable">
                <tr>
                    <td><b>Associated<br />Change Notices</b></td>
                </tr>
                <tr>
                    <td><u>CN Number</u></td>
                </tr>
                <tr>
                    <td valign="middle">98765&nbsp;<input type="button" class="button" onclick="javascript:removeCN(1417,2)" id="delete" value="-" /></td>
                </tr>
                <tr>
                    <td valign="middle">CN3333&nbsp;<input type="button" class="button" onclick="javascript:removeCN(1418,3)" id="Button1" value="-" /></td>
                </tr>
                <tr>
                    <td valign="middle">AA1111&nbsp;<input type="button" class="button" onclick="javascript:removeCN(1419,4)" id="Button2" value="-" /></td>
                </tr>
                <tr>
                    <td valign="middle">AA2111&nbsp;<input type="button" class="button" onclick="javascript:removeCN(1419,4)" id="Button3" value="-" /></td>
                </tr>
                <tr>
                    <td valign="middle">AA1311&nbsp;<input type="button" class="button" onclick="javascript:removeCN(1419,4)" id="Button4" value="-" /></td>
                </tr>
                <div id="newVals"></div>
                <input type="hidden" name="cnNum" id="cnNum" />
                <tr>
                    <td><input type="text" id="newCN" value="" size="3" class="text" />&nbsp;<input type="button" onclick="javascript:addCN()" id="add" value="+" /></td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    Last edited by chrscote; 05-07-2009 at 08:32 AM.

  11. #11
    Join Date
    Apr 2009
    Posts
    48
    just replace table row id in your function call with this.parentNode.parentNode.rowIndex

  12. #12
    Join Date
    Jun 2005
    Posts
    97

    Question

    That works fine if I am using a button to remove the row. However, now I'm trying to do something similar using a simple link, but it's not working. I've tried using a single .parentNode and that also doesn't work. I keep getting an error saying that parentNode is null or not an object. I had assumed, incorrectly I guess, that since I'm not using a button, that I could take out one of the parentNode's in the function call.

    Chris

    BTW, here's my code as I have it now:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Cable Editing Form</title>
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
        <script type="text/javascript">
            function editDate(rowID) {
                //This function will edit the row so that the right column is given a text box
                //to enter the install date in the row that is selected.
                alert(rowID);
            }
        </script>
    </head>
    <body>
        <input type="hidden" id="hull" value="" />
        <input type="hidden" id="hullID" value="" />
        <table border="0" id="myTable" width="180">
            <tr>
                <td><img src="trnsp.gif" width="120" height="1" border="0" /></td>
                <td><img src="trnsp.gif" width="60" height="1" border="0" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><b>Hulls Impacted by this EC/SU</b></td>
            </tr>
            <tr>
                <td align="center"><b><i>Hull</i></b></td>
                <td><b><i>Install Date</i></b></td>
            </tr>
            <tr>
                <td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a></td>
                <td>10/26/2006</td>
            </tr>
            <tr>
                <td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">727&nbsp;&nbsp;Michigan</a></td>
                <td>9/1/2007</td>
            </tr>
            <tr>
                <td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">728&nbsp;&nbsp;Florida</a></td>
                <td>2/7/2007</td>
            </tr>
            <tr>
                <td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">729&nbsp;&nbsp;Georgia</a></td>
                <td>9/1/2007</td>
            </tr>
        </table>
    </body>
    </html>

  13. #13
    Join Date
    Apr 2009
    Posts
    48
    change <a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">
    to
    <a href="void(0)" onclick="javascript:editDate(this.parentNode.parentNode.rowIndex); return false;">

  14. #14
    Join Date
    Jun 2005
    Posts
    97
    Thank you. I guess I tried everything but that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles