Appendo Form Row Cloning Plugin for jQuery

Appendo is a tiny jQuery plugin that creates a button interface to add and remove rows for use in forms where multiple rows of input may be entered. It may also serve as an example of simple jQuery plugin design. Prompted by a real-life scenario. Go jQuery!

So I released Jcrop yesterday and the traffic has been rolling in. That’s great, I appreciate everyone coming to take a look. The depth of the visits seems to be very favorable and I am really excited to see where things go from here… If you haven’t yet looked at what Jcrop can do, go look! Otherwise, I’ll recap the Jcrop launch in a week. Right now, since people seem to be poking around for other content, I’m releasing another jQuery plugin that I put together recently.

Meet Appendo v1.0

I wrote this plugin when I saw a colleague doing a form post and then rewriting all the form values (server-side) in the same places, just to add another row to the form. Obviously this lit up the little jQuery light that I’ve had over my head for a few months now, and I was in action. I did search for such a plugin, but didn’t immediately turn anything up. No big!

My first version actually wasn’t a jQuery plugin, but the simplicity of the idea and the elegance of implementing jQuery plugins made a logical match. So soon after making the mockup, I re-wrote it as a plugin with some obviously needed options, wrote up some documentation, and here we are.

Check out Appendo v1.0

The demos will give you the best idea of what this plugin does. (It’s a bit hard to describe, what are “cloned form rows, and how might they be managed?!) I think the documentation is pretty complete and for it’s purpose the plugin is bug-free as far as I can tell. So it’s being released as a 1.0 version.

I do need to do something about that cheesy graphic I made though.

Honestly I don’t know how useful people will find the plugin, but it’s well suited for beginners’ use, and doesn’t necessarily require any Javascript ability. And, it’s lightweight and singular in purpose enough to maybe serve as an example of jQuery plugin design. Let me know if you find it useful!

Tags: , , ,

3 Responses to “Appendo Form Row Cloning Plugin for jQuery”

  1. pramendraNo Gravatar wrote:

    i have checked this script , in ie php is returning value as arrays but in firefox and chorme it dont.

    Can you please give me an update if i needto change something.

  2. joshNo Gravatar wrote:

    pretty cool. would be nice to be able to remove inner rows. i almost have it but not sure how to properly call update_buttons()

  3. Boyd PearsonNo Gravatar wrote:

    inner row deletion would be the icing on the cake