Duplicate Form Inputs
24 April 07
| Permanent Link | Add Comments
Not long ago, I dreaded the thought of having to code the JavaScript functionality that would allow a user to add duplicate form inputs. But with a little help from jQuery, this type of functionality went from visual design to functional prototype with ease. Boy, that just sounded like an infomercial – good thing jQuery is free.
I rarely see such an interface discussed, and in case you haven’t looked, it’s quite difficult to find a good code example for this pattern. Then again, it is a rather complex and highly custom functionality dependent upon the interface and user goals.
At any rate, check it out. Feedback welcomed.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
Nicely done. Per usual.
There’s a bug whereby if you create a couple and then delete one in the middle, you can add one more but no more after that.
After duplicating a set, the user should be able to delete the first set. I know why you’ve done it the way you have but if you can delete any of the others, why not the first?
Otherwise, it’s looking pretty good.
I like the interaction. I did a similar pattern, but it was a pain in my butt! It was fun to work on though. I was still a bit new to Front End, so the underlying code may not be that great, but I was proud of the end result. I’d love to revisit it and update it with something a little more up to date. Maybe this will be my motivation. Funny enough, I apparently used jQuery and also Jonathan’s getElementByClassName code.
http://images3.ichotelsgroup.com/flash/html/meetings/budget/index.html
Looks great. Only question I would have is how to keep the data input you already entered. I imagine that someone fills in a few rows and then decides to add one more. In the current script you loose your data when you click to add another row.
@matthijs – I’m not sure what you mean. Right now the fields are not really usable because I am using them to output the name of the field. I change this, and now input data should stick. This really was not a bug, just a way to demonstrate that each input will have a unique name.
Cody, now I see why that was. Thanks for clearing that up.