Home/ Questions/Q 571917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:33:30+00:00

I have some Javascript that dynamically adds rows/fields when you click the button, Add

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The form elements you’re adding to the DOM don’t have names. You need to assign names to them before those names can be used in a form submission.

    var cboOffsetGroupOperator = document.createElement("select"); 
cboOffsetGroupOperator.setAttribute('name', 'cboOffsetGroupOperator1'); // this is what you're missing
p.appendChild(cboOffsetGroupOperator);

    And please, as SQLMenace said, fix the SQL injection problem you have in there… to get started, put the following text into the detail comments field and submit it.

    abc ‘;create table bork(a
    varchar(30));insert bork values (‘all
    your base are belong to us’); —

    However, I encourage you to pay attention to the answer that says your javascript will not work cross-browser. It looks like you need to dig into things a bit to get your code really right.

    • 0