473,513 Members | 2,605 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

adding row dynamically and sending all the row data to the server side

1 New Member
Hello All,

I have to add row dynamically through js.
Sometimes some data also comes from database and placed in the row data.

If i add row , i should have database values and the data which i will add through clicking add button.

for example :
if 3 rows data came from database if I click add button , i should get new row in 4th row position and i should send all values(3 database rows value + values i added) to the server side.
i need to keep these values in session also.

Thanks,
vicky
Feb 27 '08 #1
4 1609
hsriat
1,654 Recognized Expert Top Contributor
Hello All,

I have to add row dynamically through js.
Sometimes some data also comes from database and placed in the row data.

If i add row , i should have database values and the data which i will add through clicking add button.

for example :
if 3 rows data came from database if I click add button , i should get new row in 4th row position and i should send all values(3 database rows value + values i added) to the server side.
i need to keep these values in session also.

Thanks,
vicky

You will send data to server by AJAX or directly by submitting the form?

Show me the code which you have till now. Then I can try my best.
Feb 27 '08 #2
balurajeev
7 New Member
[HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">[/html]
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3.                 var ar=new Array();
  4.                 var ar2=new Array();
  5.                 var len;
  6.                 function LoadDdl()
  7.                 {
  8.                 debugger;
  9.                 if(document.getElementById('Select1')!=null)
  10.                 {
  11.                 len=document.getElementById('Select1').options.length;
  12.  
  13.                 for(i=0;i<len;i++)
  14.                 {
  15.  
  16.                  ar[i]=document.getElementById('Select1').options[i].innerHTML;
  17.                  ar2[i]=document.getElementById('Select1').options[i].value;
  18.                 } 
  19.                 } 
  20.                 }   
  21.  
  22.     function addRow()
  23.             {
  24.             var ni = document.getElementById('trContent');
  25.             var numi = document.getElementById('theValue');
  26.             var num = (document.getElementById('theValue').value -1)+ 2;
  27.             numi.value = num;
  28.                 //add a row to the rows collection and get a reference to the newly added row
  29.                 var newRow = document.all("tblGrid").insertRow();
  30.  
  31.                 //add 7 cells (<td>) to the new row and set the innerHTML to contain text boxes
  32.  
  33.                 var oCell = newRow.insertCell();
  34.                 oCell.innerHTML = "<input type='text' id="+"slno"+num+" name='t1' style='width: 72px'>";
  35.  
  36.  
  37.                 oCell = newRow.insertCell();
  38.                 //oCell.innerHTML = "<input type='text' name='t2' style='width: 72px'>";      
  39.                 //oCell.innerHTML = "<select  id='ddl' name='t2' style='width: 72px'>";   
  40.                 var selecttg="<select  id="+"ddl"+num+"' style='width:72px'>";
  41.                 var optiontg="";
  42.                 for(i=0;i<len;i++)
  43.                 {
  44.  
  45.                 //var sel=document.getElementById('ddl');
  46.                 var optiontg =optiontg+"<option value="+ar2[i].toString()+">"+ar[i].toString()+"</option>";
  47.  
  48.                 }
  49.                 var fullbotle=selecttg+optiontg;
  50.                 oCell.innerHTML=fullbotle+"</select>";
  51.                 //oCell.innerHTML="</select>";
  52.                 oCell = newRow.insertCell();
  53.                 oCell.innerHTML = "<input type='text'  id="+"number"+num+"   name='t3' style='width: 72px'>" ;
  54.                 oCell = newRow.insertCell();
  55.                 oCell.innerHTML = "<input type='text' id="+"qty"+num+"  name='t4' style='width: 72px'>";
  56.  
  57.                 oCell = newRow.insertCell();
  58.                 oCell.innerHTML = "<input type='text' id="+"rate"+num+"  name='t5' style='width: 72px'>";
  59.  
  60.                 oCell = newRow.insertCell();
  61.                 oCell.innerHTML = "<input type='text' id="+"discount"+num+"  name='t6' style='width: 72px'>";
  62.                 oCell = newRow.insertCell();
  63.                 oCell.innerHTML = "<input type='text' id="+"Amount"+num+" name='t7'  style='width: 72px'>";            
  64.                 oCell = newRow.insertCell();
  65.                 oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";
  66.             }
  67.  
  68.             //deletes the specified row from the table
  69.             function removeRow(src)
  70.             {
  71.                 /* src refers to the input button that was clicked.    
  72.                    to get a reference to the containing <tr> element,
  73.                    get the parent of the parent (in this case case <tr>)
  74.                 */            
  75.                 var oRow = src.parentElement.parentElement;        
  76.  
  77.                 //once the row reference is obtained, delete it passing in its rowIndex            
  78.                 document.all("tblGrid").deleteRow(oRow.rowIndex);        
  79.             }
[html] </script>
</head>
<body onmouseover="LoadDdl()">
<input type="hidden" value="0" id="theValue" />
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed" runat="server">
<tr>
<td >
SLNo</td>
<td >
Item</td>
<td >
Number</td>
<td >
Quantity</td>
<td >
Rate</td>
<td >
Discount</td>
<td>
Amount</td>
</tr>
<tr id="trContent">
<td >
<input id="Text1" type="text" runat="server" style="width: 84px" /></td>
<td >
<select id="Select1" runat="server" style="width: 102px"></select></td>
<td >
<input id="Text3" type="text" runat="server" style="width: 72px" /></td>
<td >
<input id="Text4" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text5" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text6" type="text" runat="server" style="width: 66px" /></td>
<td>
<input id="Text7" type="text" runat="server" style="width: 72px" /></td> <td ><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>

</table>
<hr/>
<input type="button" value="Add Row" onclick="addRow();" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" /></div>
</form>
</body>
</html>[/HTML]
Apr 2 '08 #3
hsriat
1,654 Recognized Expert Top Contributor
Can you please do a little favor of including your code within [html] and [/html] tags?
Apr 2 '08 #4
acoder
16,027 Recognized Expert Moderator MVP
balurajeev, are you and vicky one and the same person?

If not, you should've explained what the problem with your code is (and posted using code tags).
Apr 3 '08 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

16
1801
by: sirsean | last post by:
Hi all. I'm trying to dynamically build menus and objects after my page loads. Data is stored in an XML file and is parsed at runtime into Javascript objects. At the moment, I'm working on creating...
5
1745
by: vanisathish | last post by:
Hi All, I need to constantly update some values to the User Interface. In order to do the updation efficiently, i am planning to run some script in the server side that constantly keeps sending...
3
4858
by: Jim Heavey | last post by:
Trying to figure out the technique which should be used to add rows to a datagrid. I am thinking that I would want an "Add" button on the footer, but I am not quite sure how to do that. Is that...
0
1864
by: Sileesh | last post by:
Hi I have html table and a Button in an Aspx page. I am adding one row with some textboxes to Html table each time i click on the Button thru Javascript. Now problem is when when i try to...
1
1504
by: rmccinc | last post by:
OK, I am running into some issues that I cant figure out a work-around. I am not going to post code cause I figured out WHY my issue is happening: -I have a datagrid, and a button that fires a...
5
8488
by: Mark Rae | last post by:
Hi, Is it possible to add events, specifically a Click event, to a dynamically created TableCell? I have an <asp:Table...> control to which I'm dynamically adding TableRow controls made up of...
9
2753
by: Neo Geshel | last post by:
I have strip-mined, strip-searched, and completely exhausted the Internet (up to the 30th page on Google, with 100 results per page!!), all without finding an answer to my question AS TO WHY IT...
2
1786
by: A.Wussow | last post by:
Hi Everybody, i want to load dynamically content from some user controls (with forms, or some data-controls) using atlas. So i use an UpdatePanel for loading the user control into a placeholder....
4
4455
by: Lewis Holmes | last post by:
Hi I have the following situation in one of my asp.net pages. The user can add multiple table rows to a form by selecting a button. These rows can contain asp.net controls. When this button is...
0
7260
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7160
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
1
7099
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7525
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5685
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
3233
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3222
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1594
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
456
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.