How to code dynamic forms
Description
Programming static forms can be tricky business. When we say static here we refer to the fact that the form html is entered in the html and does not change. Dynamic forms are trickier. With dynamic forms, the form is generated on the fly by user interaction. In the example we present here, there is an [ add field ] button which dynamically added text fields to the existing form.
With dynamic forms data programming capability whole wide worlds of amazing ideas for software creation are in your wheel house. You can make sophisticated apps.
There is no server side programming presented here.
Audience
You are a front end web programming interested in dynamically generated html forms. You are comfortable with the basics of forms programming.
Demo
demo in it's own page: ./demo
js file link: ./demo/js01.js
Explanation
There are two methods of particular interest. First the addField() method. It simply generated the html and appends it to the dom. The second is the serialize() method. That is the work horse and it is just a for loop. There is nothing to it. The DOM api automatically takes care business for you by building forms elements into an array. You just need to loop thru it.