Using forms in a website to let the user register is pretty common these days. But what happens when you want several input values of the same subject? It's pretty ugly to make 20 fields with "I can speak the following languages:". Those users that can only speak one or two languages would leave a big empty space and would have to scroll down a lot. Those users that can speak more than 20 languages can't input everything they want.

In this example, what you want is that the user can give an input and dynamically expand the form. This can be achieved with the help of JavaScript and here I'll show you how.

This isn't going to be a long article, since I don't have much to tell about this technique. Just check out the demo, look at the code and learn for yourself. I added comments to make it a bit more easier.

Breakdown

Basically, this is what this technique does. When the user presses the "Add language" button, the JavaScript function is triggered. It asks the user for a language input. If nothing is entered, the script will abort.

When a language is entered, the script will find the hidden element called readnode and will clone it. It will copy all childNodes to new fields and give them all a different ID for a reference.

Also, the language text is replaced using innerHTML. This will be the (non-editable) text shown to the user. There was one problem over here: The FORM can't handle with plain paragraphs. This was the reason to add a hidden field with the latest language.

The new fields are placed in the document on the writenode place. A "remove" button is added by deleting the parent node.

Download

You can download the source files (including the PHP script that I used on the demo page) in the download section.

Conclusion

I know this technique isn't perfect and not so nice as an AJAX version would be. Also, it doesn't work when the user has JavaScript disabled. Otherwise than that, it works nicely as expected. To improve the script, you could add regular expression rules for the input of the user (only alphabetic characters). Another option would be, that the user has no input but you copy a text-box with all languages known so no spelling mistakes are made. Oh, and it needs (a lot) of (CSS) styling.

Interested in this topic? You might enjoy another article I've written called

• Build native-looking apps for iOS
• Working with Websockets
• Giveaway - $40 book vouchers from ShopHTML
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• Best of the Best: 2009

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: