Scribd
Upload
8 views2 pages

Exercise 4 - Dynamic Form

Uploaded by

shaharbk1234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views2 pages

Exercise 4 - Dynamic Form

Uploaded by

shaharbk1234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Exercise 4 - Dynamic Form

Objective: Develop a dynamic form where users can add input fields dynamically and submit the
form to gather all entered values.

Instructions:

1. Understanding the HTML:

The HTML structure consists of a <button> for adding new fields and a <form>
where these fields will be appended. Additionally, there is another button within the form
to submit the entered data.

2. JavaScript:

Adding New Input Fields:

Write a function addField() that will be used to dynamically add new input fields
to the form:
1. Create a new input element using document.createElement('input') .
2. Then append this newly created input to the form using appendChild() .

Submitting the Form:

Write a function submitForm() that will be responsible for gathering all entered
values from the input fields and ensuring they are filled:
1. All input fields within the form will be selected using
document.querySelectorAll('#dynamicForm input') and stored in the
inputs variable.
2. Set a flag allFilled to true initially, which will help you check if all fields are
filled later.
3. Iterate through each input field using the forEach loop.
For each input field, if the input doesn't have a value, set allFilled to
false .
Now append each input's value to the message string.
4. After the loop, check the allFilled flag:
If it's false, alert the user to fill all fields.
If it's true, display an alert showing all the gathered values.
3. HTML:

Use the attached HTML code for this exercise.

4. User Interaction:

Clicking the "Add Field" button should create a new input field in the form.
Filling in some data and clicking the "Submit" button should either alert the user to fill all
fields or show an alert with all the values separated by a comma.

5. Testing the Dynamic Form:

Open the HTML file in a browser.


Click the "Add Field" button multiple times to ensure multiple fields are added.
Try filling in some data and leave some fields empty. Click "Submit" and ensure you get
an alert asking to fill all fields.
Fill in all fields and click "Submit" again. This time, you should see an alert displaying all
the values you entered.

You might also like