?
Solved

How to add a new row dynamically to table and then submit

Posted on 2011-05-09
16
Medium Priority
?
959 Views
Last Modified: 2012-05-11
Hi
I have table asp page..
I want to add a new row dynamically.. when I click submit button again it should give a new empty row each time when I click submit..

what is the best way to do it in asp.
0
Comment
Question by:lucky20
  • 10
  • 5
16 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 35720319
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>

 
function addRow()
{
     tbl=document.getElementById('showTable');
  var lastRow = tbl.rows.length;
 
 
 alert(lastRow)
   var row = tbl.insertRow(lastRow);
   var iteration = lastRow;
  
    var cellremoveRow = row.insertCell(0);
    cellremoveRow.innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";
 
 
                
  var cellSno = row.insertCell(1);
  cellSno.innerHTML=iteration;
 
 
  var cellEmpno = row.insertCell(2);
  cellEmpno.innerHTML="<input type='text' name='empno'  value=''>";
 
 
 
  var cellEname = row.insertCell(3);
  cellEname.innerHTML="<input type='text' name='ename'  value=''>";
 
  var cellSal = row.insertCell(4);
  cellSal.innerHTML="<input type='text' name='sal'  value=''>";
 
 
 
  var cellAddRow = row.insertCell(5);
 
 for(var i = 0; i < lastRow; i++)
    {
        tbl.rows[i].cells[5].innerHTML = '';
    }
    cellAddRow.innerHTML="<input type='button' value='AddRow' onClick='addRow();'>"; 
 
 
 
}
 
  function removeRow(theRow){
 
  var tab=document.getElementById('showTable');
  index= theRow.parentNode.parentNode.rowIndex;
   var lastRow = tab.rows.length;
  tab.deleteRow(index);
 
  for(i=1;i<tab.rows.length;i++)
  {
   tab.rows[i].cells[1].innerHTML=i;
  }
 
        tab.rows[lastRow-2].cells[5].innerHTML ="<input type='button' value='AddRow' onClick='addRow();'>";
    
 
 
}


 function deleteColumn(theRow){
 
  var tab=document.getElementById('showTable');
// set the last column index  
 alert( tab.rows[1].cells[2].nodeName)
  var lastCol = tab.rows[2].cells.length - 1;  
 

  // delete cells with index greater then 0 (for each row)   
  for (var i=0; i<tab.rows.length; i++)   
    for (var j=lastCol; j>0; j--) tab.rows[i].deleteCell(j);   

    
 
 
}
 


 
 
</script>
</HEAD>
<BODY >
<form >
<table id='showTable' border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>EmpNo</td>
<td>Name</td>
<td>Sal</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td><input type='text' name='empno' value='' ></td>
<td><input type='text' name='ename' value='' ></td>
<td><input type='text' name='sal' value='' ></td>
<td><input type='button' value='AddRow' onClick='addRow();'> </td>
</tr>
</table>
<input type='submit' value='submit' >
</form>
</BODY>
</HTML>

Open in new window

0
 
LVL 1

Author Comment

by:lucky20
ID: 35720629
@chaituu

thanks for ur example.. I will try now..
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 35726308
Hi Lucky, please try the code I have below. chaituu has a  nice option.  However, this is in pure asp.  It is easy to add a function to remove a row too.  The value this could have over the javascript version is it will work even if javascript is turned off.  Also, I assume you are looking for something as part of a larger operation to co mingle with your database and this will may be easier to work with in that respect.

 
<%
if request("rows")<>"" then
	rows=int(request("rows"))+1
	else
	rows=1
end if
%>
<form action="" method="get" enctype="application/x-www-form-urlencoded" name="MyForm" id="MyForm"><input name="Submit" type="submit" value="Submit" />
 Click the button to add a row
   <input name="rows" type="hidden" id="rows" value="<%=rows%>" />
</form>
<table width="500" border="0" cellspacing="0" cellpadding="0">

<%
for x=1 to rows
%>

  <tr>
    <td>This is row <%=x%></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
<%
next
%>  
</table>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:lucky20
ID: 35728595
@padas..
thanks
I will try to add this. ..
0
 
LVL 1

Author Comment

by:lucky20
ID: 35738064
@chaituu

I am working on the code you have given..
It is not adding a row.

And it is not providing any error message on the screen.
0
 
LVL 1

Author Comment

by:lucky20
ID: 35738475
@padas,@chaituu

this is my basic program without adding addrow function..

even after adding the function addrow() also,it is not creating any  new row..

<% @ Language = VBScript %>
<!-- #INCLUDE FILE="include/adovbs.asp" -->
<!-- #INCLUDE FILE="include/functions.asp" -->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>items</title>
</head>
<body>
<form method="post" action="items.asp" name="form1" onsubmit="validateform(this)">
 <table>
<tr><td>Choose Itemid
  <%
OpenSQLConn						
SQL = "select Itemid from items where categoryid=5 "
Set rs = Conn.Execute(SQL)%>
<td> <select name="optitem" >
<option value="">Please Choose</option>
 <% Do While Not rs.EOF %>
 <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
<%
rs.MoveNext
Loop
							
%>
</select></td>
<td><input type="submit" value="Show items"></td>
</tr>
</form>

<%
optitem=request.form("optitem")
if optitem <> "" then
sql=" SELECT * from items where itemid="&optitem  
		
Set rs=Conn.Execute(sql)
%>
<table width="80%" cellspacing="0" cellpadding="2" border="1"  name="mytable">
 <tr>
      	  	<th> Id</th>
      	 	<th> name</th>
       		<th>quantity</th>
      		</tr>

<%
   do until rs.EOF
           response.write("<tr>")
           response.write("<td>" & rs("itemid") & "</td>")
           response.write("<td>" & rs("item_name") & "</td>")
         
%>
           <td><input type="text" value="<%= rs("quantity") %>" /></td>
 <%
 response.write("</tr>")
 rs.MoveNext
 loop
 rs.close
Conn.close
		
 %>
        
<input type="submit" value="Add Row" name="addrow"  onclick="doaddrow();">

</table>
        
<input type="submit" value="Save" name="Save">
<%  end if %>
 </table>
   
</body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 35739100
Lucky, first your save button on line 67 is not enclosed in a form.  What is doaddrow()?  But most important the way you have this written the rows are created dynamically by line 47 "do until rs.eof" and that is fired by input from form1 which is from line 11 to 24.  It looks like the </table> on line 69 is not needed and should be removed.

So you can't really just insert more rows to that table just by adding rows in the way I showed you on the other question.  The rows here are create dynamically by the size of your recordset.  Are you trying to insert more data?  That would create more rows.  

My suggestion would be to make a new form below line 68 with a text field for quantity and a hidden field for the the itemid that gets it's value from optitem and submit button and that should submit o to code to insert a new recordset.
0
 
LVL 1

Author Comment

by:lucky20
ID: 35739296
@ padas,

sorry i forget to write closed form tag..

ok... my form will display dropdown box and 'show values' button.

when user selects any item from drop down and click on show values..
It will display the data in tabular format..

Here i want to add a row with dropdown boxes inside.when user selects the data from drop down and click on add, it should be add to form table, as well as database table..


I am a bit confused with your suggestion..

because that is my requiremnt..
here it is failing with creating a row..



do addrow()  function i have used chetan's code there.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 35739641
This is what I am seeing:

1 ) Choose an item from a drop down list via form1

2) Once chosen from the drown down list, display all records for that item.  The rows in the table showing the itemid, item_name and the text box with the quantity will be dynamically created based on the amount of data in that recordset.  Here it l looks like you need to add a form so you can update the quantity with the quantity field.

I am confused as to where you are trying to add rows because the rows are dynamically added based on the size of the recordset.   Is there supposed to be another drop down?  I don't think you ned the do addrow() because the rows should be created by the size of your database.    Or do you always want to have a blank row at the bottom?  In that case just hard code the row

<% @ Language = VBScript %>
<!-- #INCLUDE FILE="include/adovbs.asp" -->
<!-- #INCLUDE FILE="include/functions.asp" -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>items</title>
</head>
<body>
<form method="post" action="items.asp" name="form1" onsubmit="validateform(this)">
  <table>
  <tr>
    <td>Choose Itemid
      <%
OpenSQLConn						
SQL = "select Itemid from items where categoryid=5 "
Set rs = Conn.Execute(SQL)%>
    <td><select name="optitem" >
        <option value="">Please Choose</option>
        <% Do While Not rs.EOF %>
        <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
        <%
rs.MoveNext
Loop
							
%>
      </select></td>
    <td><input type="submit" value="Show items"></td>
  </tr>
</form>
<%
optitem=request.form("optitem")
if optitem <> "" then
sql=" SELECT * from items where itemid="&optitem  
		
Set rs=Conn.Execute(sql)
%>
<table width="80%" cellspacing="0" cellpadding="2" border="1"  name="mytable">
  <tr>
    <th> Id</th>
    <th> name</th>
    <th>quantity</th>
    <th>&nbsp;</th>
  </tr>
  <%
   do until rs.EOF
   ' You should have multiple rows below based on the selection of form1 
   %>
   <form name="frmItems" id="frmItems">
  <tr>
    <td><%= rs("itemid")%></td>
    <td><%= rs("item_name")%></td>
    <td><input type="text" value="<%= rs("quantity") %>" /></td>
    <td><input type="submit" value="Save" name="Save"></td>
  </tr>
  </form>
  <%
 rs.MoveNext
 loop
 rs.close
Conn.close
		
 %>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>This row will always be at the bottom</td>
<td>&nbsp;</td>
</tr>
</table>
<%  end if %>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:lucky20
ID: 35739983
@padas

1.I just need a blank row to that table..so that if at all i need to add any new items I can add here..

this one only failing to add row..

2.yes quantity field is editable, if at all any values change, I can Update.


the code you provided will creating an row..But I can't type anything on it..
and save button should be at the end of table..not for each row.
0
 
LVL 1

Author Comment

by:lucky20
ID: 35740004
@padas..
There must be an add row button .If the person clicks on the addrow,then it will create a row at the end..
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 35740120
If you need to add new items, that has to be done in a separate form.

 
<% @ Language = VBScript %>
<!-- #INCLUDE FILE="include/adovbs.asp" -->
<!-- #INCLUDE FILE="include/functions.asp" -->

<%
if request.form("addmore") = 1 then 
 ''Add your insert code here
end if
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>items</title>
</head>
<body>
<form method="post" action="items.asp" name="form1" onsubmit="validateform(this)">
  <table>
  <tr>
    <td>Choose Itemid
      <%
OpenSQLConn						
SQL = "select Itemid from items where categoryid=5 "
Set rs = Conn.Execute(SQL)%>
    <td><select name="optitem" >
        <option value="">Please Choose</option>
        <% Do While Not rs.EOF %>
        <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
        <%
rs.MoveNext
Loop
							
%>
      </select></td>
    <td><input type="submit" value="Show items"></td>
  </tr>
</form>
<%
optitem=request.form("optitem")
if optitem <> "" then
sql=" SELECT * from items where itemid="&optitem  
		
Set rs=Conn.Execute(sql)
%>
<table width="80%" cellspacing="0" cellpadding="2" border="1"  name="mytable">
  <tr>
    <th> Id</th>
    <th> name</th>
    <th>quantity</th>
    <th>&nbsp;</th>
  </tr>
  <%
   do until rs.EOF
   ' You should have multiple rows below based on the selection of form1 
   %>
   <form name="frmItems" id="frmItems">
  <tr>
    <td><%= rs("itemid")%></td>
    <td><%= rs("item_name")%></td>
    <td><input type="text" value="<%= rs("quantity") %>" /></td>
    <td><input type="submit" value="Save" name="Save"></td>
  </tr>
  </form>
  <%
 rs.MoveNext
 loop
 rs.close
Conn.close
		
 %>
 <form enctype="application/x-www-form-urlencoded" name="frmAddItems" id="frmAddItems">
 <tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Add more stuff below</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><select name="item" id="item" >
  <option value="">Please Choose</option>
  <% Do While Not rs.EOF %>
  <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
  <%
rs.MoveNext
Loop
							
%>
</select>
  <input name="addmore" type="hidden" id="addmore" value="1"></td>
<td><input name="quantity" type="text" id="quantity" /></td>
<td><input name="btnAdd" type="submit" id="btnAdd" value="Add Item"></td>
</tr>
</form>
</table>
<%  end if %>
</body>
</html>

Open in new window



Below is the same thing but submit once to update everything.  NOTE: On this version you will need to use the information we talked about on updating multiple rows. You can not simply have one update button to update the entire database with different data.  My suggestion is to get the above working the way you want first where you have to press individual "save" buttons for each item to update.  Once you have that working, then move on to using just one save button.  It's much easier to tackle one problem at a time.    If you need more help with updating multiple rows in a table, I would say go back to that post.
<% @ Language = VBScript %>
<!-- #INCLUDE FILE="include/adovbs.asp" -->
<!-- #INCLUDE FILE="include/functions.asp" -->
<%
if request.form("addmore") = 1 then 
 ''Add your insert code here
end if
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>items</title>
</head>
<body>
<form method="post" action="items.asp" name="form1" onsubmit="validateform(this)">
  <table>
  <tr>
    <td>Choose Itemid
      <%
OpenSQLConn						
SQL = "select Itemid from items where categoryid=5 "
Set rs = Conn.Execute(SQL)%>
    <td><select name="optitem" >
        <option value="">Please Choose</option>
        <% Do While Not rs.EOF %>
        <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
        <%
rs.MoveNext
Loop
							
%>
      </select></td>
    <td><input type="submit" value="Show items"></td>
  </tr>
</form>
<%
optitem=request.form("optitem")
if optitem <> "" then
sql=" SELECT * from items where itemid="&optitem  
		
Set rs=Conn.Execute(sql)
%>
<table width="80%" cellspacing="0" cellpadding="2" border="1"  name="mytable">
  <tr>
    <th> Id</th>
    <th> name</th>
    <th>quantity</th>
    <th>&nbsp;</th>
  </tr>
  <form name="frmItems" id="frmItems">
    <%
   do until rs.EOF
   ' You should have multiple rows below based on the selection of form1 
   %>
    <tr>
      <td><%= rs("itemid")%></td>
      <td><%= rs("item_name")%></td>
      <td><input type="text" value="<%= rs("quantity") %>" /></td>
      <td>&nbsp;</td>
    </tr>
    <%
 rs.MoveNext
 loop
 rs.close
Conn.close
		
 %>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="submit" value="Save" name="Save"></td>
      <td>&nbsp;</td>
    </tr>
  </form>
  <form enctype="application/x-www-form-urlencoded" name="frmAddItems" id="frmAddItems">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Add more stuff below</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><select name="item" id="item" >
          <option value="">Please Choose</option>
          <% Do While Not rs.EOF %>
          <option value='<%=rs("Itemid")%>'> <%=rs("Item_name")%></option>
          <%
rs.MoveNext
Loop
							
%>
        </select>
        <input name="addmore" type="hidden" id="addmore" value="1"></td>
      <td><input name="quantity" type="text" id="quantity" /></td>
      <td><input name="btnAdd" type="submit" id="btnAdd" value="Add Item"></td>
    </tr>
  </form>
</table>
<%  end if %>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:lucky20
ID: 35740301
Hey one more question..
If i click on Add Item it should add the items into databse..
at the time how can I get those values to insert into databse.


can you give me some detail about form encrypt..
becoz, i never used encrypt..
  <form enctype="application/x-www-form-urlencoded" name="frmAddItems" id="frmAddItems">
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 35740652
Lucky, you have to use your insert code to insert data to the database.  You will add it at the top where I have, "'Add your insert code here".    

application/x-www-form-urlencoded is the default for submitting data as opposed to a file upload.


0
 
LVL 1

Author Comment

by:lucky20
ID: 35740811
ok ..I will do this now..
0
 
LVL 1

Author Closing Comment

by:lucky20
ID: 35785024
The solution has some issues not resolved yet..
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Suggested Courses

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question