Dynamic Pages

Question: I have a question here that has regards to dynamic variable fields. I would like to have a row that is default and it will add another new row when the user clicked on the button 'add new row'. At the same time, when add new row was clicked, the data previously entered in the 1st row will be first inserted into the database and so on. My form page goes this way:

 <table>
<tr>
<td>
<input type="text" name="Name" value="">
</td>
<td>
<input type="text" name="class" value="">
</td>
<td>
<input type="text" name="Age" value="">
</td>
</tr>
<tr>
<input type="submit" value="Save" name="action">
<input type="submit" value="Add new row" name="action">
</tr>
</table>

How would I be able to add the new row where the textbox name will be automatically increased such as 'Name1', 'Name2', 'Name3', etc... But how many rows will be created, depends on the user. The new row created will be having the same fields just that there was a change in the textbox's name. Is javascript able to help me in this situation???
Serene

Answer: Javascript can't update databases but it can do everything else that you are asking about.

You can't have two submit buttons on the same form, try using type="button" instead of type="submit" and then use onclick= to call your javascript when the button is clicked.

To create a dynamic page you first need to capture the information about how many entries are to be displayed. You can either do this on a previous page or (as you want) by update the existing page when your visitor requests it. This means that you will need to load a new page and pass the information to it. Take a look at this page for info on the three different ways that you can pass info between pages using javascript.

The part of the page that you only want to display when it is needed can then be dynamically created by Javascript using document.write statements. You just need to include these statements inside of if statements that test if the condition to display the field is met.

 if (num-entries >= 2) { document.write('second set of fields');}
if (num-entries >= 3) { document.write('third set of fields');}
etc.

You can have the javascript create whatever part of the page that you want dynamic just by including the html for that part of the page in document.write statements. Whether that part of the code gets used or not depends on the conditions of any if statements that it is contained in. I use this method on my "Your Favourite Links" page which allows you to create you own personal links page containing up to 50 links. You enter the information into the form at the bottom of the page and when you click the ADD button the page is updated to add the link you just entered. I get the page to update itself automatically using

 top.location = 'fav.htm';

which tells the browser to load the specified page at the top of the browser window. In this case because the page specified is the same as the one calling the code, the page gets refreshed to include the additional fields.

If you want to update a database with the information entered then you can use a CGI script (probably written in PERL) that will take the information passed to it from the form and update it into the database. You would call the script from the action= field on the form. Alternatively you could forget all about using javascript and build the entire page using a server side scripting language such as ASP or PHP.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate