Find solution
How can I get the value of dynamically created input?

What is the solution to get the values of text boxes in the cloned rows having same name, and insert into the database using jsp and servlet?

  • 1)here i'm doing clone of a row...but this code is working only in eclipse [ ie ,cloning is working ] and it is also not working in anybrowsers. if i write <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  to this code ,it will not work in eclipse also..... 2)i have servlet code to get only single value from jsp  String address_seq_num=request.getParameter("address_seq_num"); String effdt =request.getParameter("effdt"); String eff_status =request.getParameter("eff_status"); how can i get the value of address seq number in the cloned row fromjsp to servlet to insert into the next row of a table in the database. please guide me... <html> <head> <script> function clonetable() { var x=document.getElementById("main_table"); //get the table var rowCount = x.rows.length; var row = document.getElementById("table_row_clone"); // find row to copy var table = document.getElementById("table_body"); // find table to append to var clone = row.cloneNode(true); // copy children too //var tb = document.getElementById("asn"); //var rowCount = x.rows.length; //var y=document.getElementById("maintable"); //var count=y.rows.length; var tb1 = clone.document.getElementById("asn"); //tb1.value = parseInt(tb1.value, 10) + 1; tb1.value=rowCount+1; //tb1.value=count+1; http://clone.id = "abc"; // change id or other attributes/contents table.appendChild(clone); // add new row to end of table } function deltable() { var x=document.getElementById("main_table"); //get the table var rowCount = x.rows.length; if(rowCount>1) { x.deleteRow(rowCount-1); }//delete the last row } </script> </head> <body> <table id="main_table" align="center" style="width:75%" > <tbody id="table_body"> <tr id="table_row_clone"> <td> <table align="center" style="width:100%" > <tr > <td align="center"> <div style="border:3px solid silver;border-radius:5px;background-color:grey"> <table width="100%" > <tr> <th align="center" > Address Details </th> </tr> </table> </div> </td> </tr> <tr> <td> <div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF"> <table align="center" style="width:99%"> <tr style="background-color:#1E90FF"> <td style="width:35%"> <table width="100%"> <tr id="slrow"> <td style="width:43%"> Address Seq Num </td> <td> <input id="asn"style="width:60px" name="address_seq_num" type="text" value="1" readonly> </td> </tr> </table> </td> <td width="49%" align="right" > <input style="width:80%" type="text" value="Reg.office/Primary Office"> </td> <td align="right"> <input style="width:30px" type="button" value="+" onclick="clonetable()"> <input style="width:30px" type="button" value="-" onclick="deltable()"> </td> </tr> </table> </div> </td> </tr> <tr> <td> <div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF"> <table align="center" style="width:99%" > <tr > <td align="left" style="width:50%"> <table width="100%"> <tr> <td style="width:30%"> Effective Date </td> <td style="width:70%" > <input style="background-color:white;width:44.5%" name="effdt" type="text" class="tcal"> </td> </tr> </table> <td style="width:50%"> <table width="100%" > <tr> <td align="right"> Effective Status </td> <td style="width:45%"> <select name="eff_status" name="eff_status" style="float:right;width:145px" id="estatus"> <option value="Active" selected>Active</option> </select> </td> </tr> </table> </td> </tr> </table> </div> </td> </tr> </table> </td> </tr> </tbody> </table> </body> </html> here i'm doing clone of rows... first image is showing cloning of rows 1)first address seq number wiil be 1, and user will enter effective date and effective status... 2)when user click [+] the next row will comes with auto increment of address seq num=2... and user will enter rest of the fields... 3)my problem is...how can i insert the subsequent "address seq number" , "effective date" and "effective status" to subsequent rows in the database table as i shown in the second image.... i dont know how to do...please guide me

  • Answer:

    Have you considered changing the id of the newly cloned row form elements? It's quite simple: document.getElementById("clone_id").id = [clone_id_incremental_number] But make sure it applies to the clone. On the other hand the simpler workaround would be to not use cloning at all and instead use the html code of a row and add it with incremented number. The html could be constructed with createElement methods.

Shubhojoy Mitra at Quora Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.