I have some Javascript that dynamically adds rows/fields when you click the button, "Add New Item." The value for each row is captured in a hidden text field, "txtIndex." (The initial value of txtIndex is set to 1.) I then capture txtIndex in a variable in vbscript to loop through the values so that they can be all inserted into a SQL table (the insert is done in the stored procedure, "spInsert"). This is the part that I'm having trouble with.
The first row on the page gets inserted into the SQL table just fine, but when I click the button and add any subsequent rows, those values are not getting inserted into the table; instead, a blank row gets inserted. So, it's not a SQL issue. From what I can see when I view the page source, the page is not recognizing that I've added any new rows/values at all. So, I'm guessing something in my Javascript is off? Can anyone tell me what I'm doing wrong and how I can correct it? Thanks!
<!--#includes file="header.asp"-->
<head>
<title>Offset Input</title>
</head>
<%Dim CN, RS, vIndex, vSQL
'GetDataConnection is included in header file.
Set CN = GetDataConnection
If Request.TotalBytes > 0 Then
vIndex = Request.Form("txtIndex")
If Request.Form("cboOffsetGroupOperator") = "" Then
Response.Write("Unable to process your request. Please complete a new entry.")
Response.Redirect("input.asp")
Else
'Loop through values in txtIndex. Insert data into table.
Do While vIndex > 0
vSQL = "spInsert "
vSQL = vSQL & "@vExceptionID = " & RS("ExceptionID") & ","
vSQL = vSQL & "@vOffsetDetailCorrectionOperator = '" & Request.Form("cboOffsetGroupOperator" & vIndex) & "',"
vSQL = vSQL & "@vOffsetDetailNumberOfItems = '" & Request.Form("txtNumberOfItems" & vIndex) & "',"
vSQL = vSQL & "@vOffsetDetailComments = '" & Request.Form("txtComments" & vIndex) & "'"
CN.Execute (vSQL)
vIndex = vIndex-1
Loop
End If
Else%>
<body>
<form name="frmInput" id="Input" method="post">
<table class="WebApps" id="tblOffsetDetail">
<tbody>
<tr>
<td colspan="3">
<h3>Offset Item Detail</h3>
<p><input name="btnSubmit" type="submit" class="button" id="btnSubmit" value="Submit"></p>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="button" value= "Add New Item" id="btnNewItem" name="btnNewItem" onClick="javascript:addNewItem();">
<input type="hidden" id="txtIndex" name="txtIndex" value="1">
</td>
</tr>
<tr>
<td width="9%"><h4>Operator:</h4></td>
<td width="6%"><h4># of Items:</h4></td>
<td width="13%"><h4>Comments:</h4></td>
</tr>
<tr>
<td>
<p><select name="cboOffsetGroupOperator1" id="cboOffsetGroupOperator1">
<option></option>
<option value="1">Name1</option>
<option value="2">Name2</option>
<option value="3">Name3</option>
<option value="4">Name4</option>
</select></p>
</td>
<td><p><input name="txtNumberofItems1" type="text" id="txtNumberofItems1" size="10" maxlength="10"></p></td>
<td><p><textarea name="txtComments1" cols="20" rows="3" id="txtComments1"></textarea></p></td>
</tr>
</tbody>
</table>
</form>
<%
End If
Set RS = Nothing
CN.Close
Set CN = Nothing
%>
<script language="javascript">
//Display additional rows, columns, and fields when Add New Item button is clicked.
function addNewItem()
{
var iX = document.getElementById("txtIndex").value;
iX ++;
document.getElementById("txtIndex").value = iX;
var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0];
var tr = document.createElement("TR");
tbl.appendChild(tr);
//cboOffsetGroupOperator1
var tdOffsetGroupOperator = document.createElement("TD");
tr.appendChild(tdOffsetGroupOperator);
var p = document.createElement("P");
tdOffsetGroupOperator.appendChild(p);
var cboOffsetGroupOperator = document.createElement("select");
p.appendChild(cboOffsetGroupOperator);
cboOffsetGroupOperator.id = "cboOffsetGroupOperator" + iX;
var cboOffsetGroupOperator1 = document.getElementById("cboOffsetGroupOperator1");
var i = 0;
for (i = 0; i < cboOffsetGroupOperator1.children.length; i++)
{
var opt = document.createElement("option");
opt.value = cboOffsetGroupOperator1 [i].value;
opt.innerText = cboOffsetGroupOperator1 [i].innerText;
cboOffsetGroupOperator.appendChild(opt);
}
//txtNumberofItems1
var tdNumberofItems = document.createElement("TD");
tr.appendChild(tdNumberofItems);
var p = document.createElement("P");
tdNumberofItems.appendChild(p);
var txtNumberofItems = document.createElement("input");
p.appendChild(txtNumberofItems);
txtNumberofItems.id = "txtNumberofItems" + iX;
txtNumberofItems.setAttribute('size',10);
var txtNumberofItems1 = document.getElementById("txtNumberofItems1");
//txtComments1
var tdComments = document.createElement("TD");
tr.appendChild(tdComments);
var p = document.createElement("P");
tdComments.appendChild(p);
var txtComments = document.createElement("textarea");
p.appendChild(txtComments);
txtComments.id = "txtComments" + iX;
txtComments.setAttribute('cols',20);
txtComments.setAttribute('rows',3);
var txtComments1 = document.getElementById("txtComments1");
}
</script>
</body>
</html>