Home/ Questions/Q 7742767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T09:21:36+00:00

I’m using the following example I found on the internet to dynamically build a

  • 0

I’m using the following example I found on the internet to dynamically build a list of input fields.

It seems to work fine, but when I submit the form, param names do I use to put the data from the HttpServletRequest?

Thanks, Rob

<HTML> 

<HEAD>     
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>     

<SCRIPT language="javascript">         

function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    var cell2 = row.insertCell(1);             
    cell2.innerHTML = rowCount + 1;               
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";             
    cell3.appendChild(element2);           
}           

function deleteRow(tableID) {             
    try {             
        var table = document.getElementById(tableID);             
        var rowCount = table.rows.length;               
        for(var i=0; i<rowCount; i++) {                 
            var row = table.rows[i];                 
            var chkbox = row.cells[0].childNodes[0];                 
            if(null != chkbox && true == chkbox.checked) {                     
                table.deleteRow(i);                     
                rowCount--;                     
                i--;                 
            }               
        }             
        }catch(e) {                 
            alert(e);             
        }         
    }       
</SCRIPT> 
</HEAD> 

<BODY>

<form name="myform" action="myServlet" method="post">

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       
    <TABLE id="dataTable" width="350px" border="1">         
    <TR>             
        <TD><INPUT type="checkbox" name="chk"/></TD>             
        <TD> 1 </TD>             
        <TD> 
            <INPUT type="text" /> 
        </TD>         
    </TR>     
    </TABLE>   

     <input type="submit" value="Go!"/>

</form>

</BODY> 
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to give your input objects a “name” attribute (or ‘id’ if your JSP isn’t using name, but name is preferred I believe)

    Try this:

    function addRow(tableID) {               
    var table = document.getElementById(tableID);               
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    var cell1 = row.insertCell(0);             
    var element1 = document.createElement("input");             
    element1.type = "checkbox";             
    element1.name = "chk_input";      //*** EDIT ***            
    cell1.appendChild(element1);               
    var cell2 = row.insertCell(1);             
    cell2.innerHTML = rowCount + 1;               
    var cell3 = row.insertCell(2);             
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.name = "text_input";     //*** EDIT ***
    cell3.appendChild(element2);           
}

    Then your params will be named “text_input” and “chk_input”. You can replace this with something more meaningful of course.

    I haven’t used JSP in a while (I assume that’s what HttpServletRequest is about…) so I can’t remember how to access them, but those will be the keys.

    EDIT: If you’re dynamically adding rows, I suppose you need a unique name. It seems you are keeping track of the row count, so you could just do something like:

     ...
 element2.name = 'text-input-' + rowCount;
 ...

    then in your controller (whatever processes the form) you could use the rowCount to set up a loop (for i .. rowcount) where you check for keys like “text-input-” + CastToString(i) for each row in the form.

    If you’re not passing rowCount with the form, just add an input of type hidden with a name=’rowCount’ and a value of the rowCount var. You can do this when the user clicks the submit button so you don’t have to update it with each row)

    form = document.getElementById('myform');
rc = document.createElement('input');
rc.type = 'hidden'
rc.value = rowCount; // make sure it's in scope!!!
form.appendChild(rc);
    • 0