Create an HTML Form Dynamically - Lab Task 3

Post Updated On: June 1, 2020

Background

Modern web based ERPs and web applications allow user to add new input fields in form dynamically. For example, you may let user to click add (+) symbol to add another field for phone number. The user city name in your provided cities option list may be missing, you may want to let user add new city in that list, all dynamically without leaving that page. If you have not used Google Forms still, you are missing an awesome product, I suggest you to must try it to understand what it means to let user create forms dynamically.

Task Description

Create a web page that shall facilitate users to create a form dynamically. User shall add required number of input fields of different types. There shall be two sections of your web page, top section shall be used to get input data from user about the required input fields on form and the bottom section shall display the output/generated form.

Let me give you an exaple to under it. At top setion of the page you shall display a from with following input fields:

Field Label:   [____________] (its text input field)

Field Name:   [____________] (its text input field)

Field ID:        [____________]  (its text input field)

CSS Classes:  [_____________] (option list of predefined CSS classes to choose from)

Input Type:     [_____________] (option list of input types to choose from)

[CREATE] (it shall be a button)

The input data in above form shall be used to create new fields in HTML form i.e. new nodes in DOM Tree. The most important is input type option list. It shall include: text, password, email, number, date, radio and checkbox. If radio or checkbox is chosen, a subform shall open to get list of radio button or checkbox labels and values (maximum 3 is ok). If user enters invalid ID that is already used for some input field, you shall show an error. User shall fill the form and click CREATE button. On click, your app shall add that field in the form at bottom section of the page (Empty Initially).

On right side of each newly added fied in bottom form, show Delete link. When user click the Delete link, that input field shall be deleted from the form. Use Bootstap form classes to make the look and feel of dynamically generated form, better.

When user fill the generated form and submit it, show all the filled data as JSON object in browser console. You may ask questions in comments below if something is not clear to you. You may use JQuery JS library or do it in core JavaScript.