-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathDynamic Form Field Generator
More file actions
36 lines (36 loc) · 1 KB
/
Dynamic Form Field Generator
File metadata and controls
36 lines (36 loc) · 1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- Objective: Develop a dynamic form field generator. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Form Field Generator</title>
</head>
<body>
<div id="formContainer">
<form id="dynamicForm">
<button type="button" id="addFieldBtn">Add Field</button>
<button type="submit">Submit</button>
</form>
</div>
<script>
document.getElementById('addFieldBtn').addEventListener('click', () => {
const newField = document.createElement('input');
newField.setAttribute('type', 'text');
newField.setAttribute('placeholder', 'New Field');
document.getElementById('dynamicForm').insertBefore(newField, document.getElementById('addFieldBtn'));
});
document.getElementById('dynamicForm').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const formObject = {};
formData.forEach((value, key) => {
if (!formObject[key]) {
formObject[key] = value;
}
});
console.log(formObject);
// Handle form data as needed
});
</script>
</body>
</html>