0

Hi frens

I have a row containing 3 text field and a dropdown. the user enters details into the textbox and chooses a option from the dropdown. User may choose to save the details or add more details by clicking on Save or Add Row button resp. If the user clicks Add Row button, another row of fields similar to the previous row must append to the table. This should happen without the page getting refreshed, because i dont want to loose the data entered in the 1st row.

I came across many threads in this forum, but they seemed like the page would get refreshed on clicking Add Row.

Please help me with this..

Counting on you guys..

thanks

3
Contributors
6
Replies
23
Views
6 Years
Discussion Span
Last Post by six_sic6
0

frens, i managed to get this much, but i dont know where i am going wrong, pls have a look at this code and suggest how can i get this to work

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
function addRow(tableid)
{	
  $(document).ready(function(){

      $("button").click(function(){
  	  var clonedRow = $("#" + tableid + " tr:last").clone(); //this will grab the lasttable row.
	  $("#" + tableid + " tr:last").append(clonedRow); //add the row back to the table
	)}
    });
	
}
</script>
</head>

<form action="test.php" method="POST" >
<table id="bill">
<tr>
	<th>Quantity</th>
	<th>Rate</th>
	<th>Total</th>
</tr>
<tr>
	
	<td><input type="text" id="quantity" name="quantity"/></td>
	<td><input type="text" id="rate" name="rate"/></td>
	<td><input type="text" id="total" name="total"/></td>
</tr>

<tr>
<td><input type="submit" name="submit" value="Save" ></td>
<td><button type="button" name="addrow" value="Add Row" onclick="addRow($('.bill'));">Add Row</button></td>
</tr>

</table>
</form>

thanks

Edited by puvi: n/a

0

frens i dont know where i am going wrong, when i checked in mozilla error console it said "addRow not defined"

can anyone pls help me understand this?? pls pls pls..

0

just change your code like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
function addRow(tableid)
{	

	  $(document).ready(function(){

      $("button").click(function(){
  	  var clonedRow = $("#" + tableid + " tr:last").clone(); //this will grab the lasttable row.
	  $("#" + tableid + " tr:last").append(clonedRow); //add the row back to the table
      });
    });
	
}
</script>
</head>

<form action="test.php" method="POST" >
<table id="bill">
<tr>
	<th>Quantity</th>
	<th>Rate</th>
	<th>Total</th>
</tr>
<tr>
	
	<td><input type="text" id="quantity" name="quantity"/></td>
	<td><input type="text" id="rate" name="rate"/></td>
	<td><input type="text" id="total" name="total"/></td>
</tr>

<tr>
<td><input type="submit" name="submit" value="Save" ></td>
<td><button type="button" name="addrow" value="Add Row" onclick="addRow($('.bill'));">Add Row</button></td>
</tr>

</table>
</form>
0

Hi frens

I have a row containing 3 text field and a dropdown. the user enters details into the textbox and chooses a option from the dropdown. User may choose to save the details or add more details by clicking on Save or Add Row button resp. If the user clicks Add Row button, another row of fields similar to the previous row must append to the table. This should happen without the page getting refreshed, because i dont want to loose the data entered in the 1st row.

I came across many threads in this forum, but they seemed like the page would get refreshed on clicking Add Row.

Please help me with this..

Counting on you guys..

thanks

Check out the following link, it has everything you want...:cool:
http://www.mredkj.com/tutorials/tableaddrow.html

0

thanks ppl...

Dont forget to click Mark this Thread as Unsolved if your problem is solved...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.