Problem With Form Elements How to Add/Remove form elements created dynamically

[TavoxPeru 0]

Hi everybody, i have a problem with a form where i want to add or remove elements from it dynamically, i'm working on an invoice form, like the following:

<form name="a" > <table id="header_data"> <tr>   <td width="20%">Nro.</td><td ><input type="text" size="20" value="val_1"></td> </tr> <tr>   <td width="20%">Date</td><td ><input type="text" size="20" value="val_2"></td> </tr> <tr>   <td width="100%" colspan="2">	 <table >		<tr>		  <th >#</th><th >product</th><th >Quantity</th><th >Price</th><th colspan="2">Total</th>		</tr>		<tr>		  <td ><input type="text" size="20" value="v_1"></td>		  <td ><input type="text" size="20" value="v_2"></td>		  <td ><input type="text" size="20" value="v_3"></td>		  <td ><input type="text" size="20" value="v_4"></td>		  <td ><input type="text" size="20" value="v_5"></td>		  <td ><input type="button"  onclick="appendRow()" value="Add"></td>		</tr>	 </table>   </td> </tr> <tr>   <td width="100%" colspan="2" align="center">	 <input type="submit" value="Save"><input type="button" onclick="window.close()">   </td> </tr> </table></form>

In this form the values are obtained from a database (edit mode) or are entered by the user (add mode), of course there is a case that some data are obtained from the database always like the product description if i use a select input but for simplicity i dont code it.

So if the user wants to add a new row he will click the Add button, but i also want to let the user to remove some row by pressing another button.

To dynamically ADD ELEMENTS i have this code that works:

function appendRow(){var tbody=document.getElementById("table_id").getElementsByTagName("tbody")[0];var tr = tbody.getElementsByTagName('tr')[0];var c = tr.cloneNode(true); tbody.appendChild(c);}

How do i do to let users to remove rows and the elements inside it from the table????

Best regards,

[faulty.lee 0]

This method won't really work. I did the same thing before. I believe you have a server side coding to handle the database part right?1. You need to post the changes back for every row, adding or removing, cause if not, any changes you've applied on the table, doesn't reflect the actual database, until you post it, but if the user simply close the page, or internet line disconnected, the changes is gone. I would suggest (i'm actually using this method), next to every row there's a "Delete" button, and a "Add Row" button on the page. If the delete is press, then a confirmation box, then posting of data back to the server to perform the deletion, then reload the data back into the page. With this method, you can also check the permission, in case someone try to post the delete command, even though the delete button is not there, you can still block the changes from the server side script. Adding new row, is simply unhiding a row with input boxes preplanted there, once save, again the result is posted back, and the page reload.2. Another way to do this is to use ajax, while the user is adding or removing data on the table, you can use ajax to do send the changes back to the server at the same time without reloading the page, much like gmail or other ajax enabled page.

[TavoxPeru 0]

This method won't really work. I did the same thing before. I believe you have a server side coding to handle the database part right?
1. You need to post the changes back for every row, adding or removing, cause if not, any changes you've applied on the table, doesn't reflect the actual database, until you post it, but if the user simply close the page, or internet line disconnected, the changes is gone. I would suggest (i'm actually using this method), next to every row there's a "Delete" button, and a "Add Row" button on the page. If the delete is press, then a confirmation box, then posting of data back to the server to perform the deletion, then reload the data back into the page. With this method, you can also check the permission, in case someone try to post the delete command, even though the delete button is not there, you can still block the changes from the server side script. Adding new row, is simply unhiding a row with input boxes preplanted there, once save, again the result is posted back, and the page reload.

2. Another way to do this is to use ajax, while the user is adding or removing data on the table, you can use ajax to do send the changes back to the server at the same time without reloading the page, much like gmail or other ajax enabled page.

Yes, i have a server side coding to handle all the database part. Now, i'm not sure which method i can implement, basically because i'm not an expert ajax developer -just start learning it- so the second method can wait, the first method you suggest i already have it, and it is the main part of my work but i want to add and implement this kind of functionallity to my work.

Thanks for your reply and best regards,

[TavoxPeru 0]

After some wasted time and lots of testing i decide to drop this code and start again, basically because the solution i want to develop do not work, i found some solutions but not for all the problem itself, if i complete one thing the rest do not work, so as i say, i start over again and finally i found the solution to this problem.

The solution is to use an excellent javascript library i found, its name is Ext JS, which allow you to develop great User Interfaces components, you can use it to develop lots of web applications in a very easy and fast way. This is a Javascript framework with Ajax enabled for the client side, and for the server side someone can use PHP or other server side scripting language, i test it with PHP and MySql with great results.

This library includes all what you need to develop great web applications because it comes with a complete set of samples that shows all of its functionality, it is free and work across all major web browsers including Internet Explorer 6+, FireFox 1.5+ (PC, Mac, *nix), Safari 2+, Opera 9+ (Mac, PC).

So, dont waste more time and Download Ext JS and start coding with it.

Best regards,