Member Avatar for puvi

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
  • 4K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by six_sic6
Member Avatar for puvi

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 because: n/a
Member Avatar for puvi

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..

Member Avatar for Shanti C

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>
Member Avatar for six_sic6

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

Member Avatar for puvi

thanks ppl...

Member Avatar for six_sic6

thanks ppl...

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.