Sometimes its helpful to allow users to dynamically add or remove elements from a form. An example might be an image upload page, where you want to allow users to upload a varying number of images. Using JavaScript you can easily place more/less links on the page that show and hide form elements.
This is often done by placing a large number of elements on the form, and setting most of them to be initially hidden with CSS. When the user clicks the “show” link, the next element is unhidden. This is not the best solution however, especially when there is a possibility of having tens of elements – thats a lot of unnecessary html to send down the pipe and render.
Another method is to actually create and destroy elements using the DOM functions. Here’s how I did this recently on a page that need to have any number of form elements.
Continue reading ‘Dynamically adding and removing form elements’ »