An Abstract Add Row Class for Dynamic Table Rows

Quite often we want to add dynamic functionality to our pages, but we end up writing a lot of page specific code. Then we duplicate that process for another page, and another page, until quite soon what we have is a big sopping mess! We’ve been talking about writing unobtrusive JavaScript, and what this also means is abstracting the function or class away from the data by which it is supported.

A good example is the attach document page for Yahoo! Mail. On that page I have the choice of adding up to five attachments – but what if I want to add more? I would have to save the first five, go back to the main compose interface, then click attach, and then start the process over again. This is a waste of time for a user. The smart thing to do would be to give the user the option of adding more fields if they so desire. It was smart not to clutter up the page with too many fields – and even smarter to let the user add some if they need it.


$2.89
- OR -

Overview

A great way would be to have a local script that instantaneously adds the form fields for the user. That is just what Yahoo! has done – take a look at this screen shot:

 

By simply clicking “Attach More Files” a new row was instantly added – very slick! You might end up having all sorts of forms that have such a need. Possibly a shopping cart or some kind of form that allows people to special order items, or build items. What if they want more rows?

A couple of years ago I worked on just such a product. We were building a web application where there were multiple pages with all different kinds of forms where we needed to save space in order to keep the page manageable – but also to give the user the ability to add more fields when the needed it. The trick was to do it without writing 15 different unique functions!

So let’s assume we have our very own fields – something for adding contacts to an address book. And we’ll give them one row, but allow them to add as many as they want – like this:

Reviews

RE: I purchased it, but cannot download or read it.

July 27, 2005 by Tom Dell'Aringa
You'll have to contact DMXZone support, unfortunately I don't post the articles or have any control over them. Tom

Great Article

September 30, 2005 by steve costello
Thanks! I have been beating myself over the head on this. Glad to have found it and paid for it! Now I just need to figure out how to post the entries into my db...

Great idea, but......

March 17, 2008 by Mark Peterson
Great idea, but now how do I get the data out after a submit is executed?

RE: Great Article

March 18, 2008 by Mark Peterson

Hi Steve, you figure this out?

You must me logged in to write a review.