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?
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).
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?
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);
}
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 08:58 AM.
Reason: Added another question
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.
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 <input type="button" class="button" onclick="javascript:removeCN(1417,2)" id="delete" value="-" /></td></tr><tr><td valign="middle">CN3333 <input type="button" class="button" onclick="javascript:removeCN(1418,3)" id="Button1" value="-" /></td></tr><tr><td valign="middle">AA1111 <input type="button" class="button" onclick="javascript:removeCN(1419,4)" id="Button2" value="-" /></td></tr><tr><td valign="middle">AA2111 <input type="button" class="button" onclick="javascript:removeCN(1419,4)" id="Button3" value="-" /></td></tr><tr><td valign="middle">AA1311 <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" /> <input type="button" onclick="javascript:addCN()" id="add" value="+" /></td></tr></table></form></body></html>
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 Ohio</a></td><td>10/26/2006</td></tr><tr><td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">727 Michigan</a></td><td>9/1/2007</td></tr><tr><td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">728 Florida</a></td><td>2/7/2007</td></tr><tr><td><a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">729 Georgia</a></td><td>9/1/2007</td></tr></table></body></html>
Dynamically add textbox for user entry and saving data entered
Reply With Quote
Bookmarks