-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (153 loc) · 5.91 KB
/
index.html
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Div</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"/>
</head>
<body>
<div class="container-fluid">
<h3>Add Div</h3>
<div id="div0" style="display: none" class="border border-primary rounded mb-2 mx-2 p-3">
<div class="row">
<div class="col-3">
<label for="dept_" class="fw-bold">select</label>
<select name="dept_" id="dept_" class="form-control" onChange="getEmployees(this)">
<option value="">- - Select - -</option>
<option value="1">Department 1</option>
<option value="2">Department 2</option>
<option value="3">Department 3</option>
</select>
</div>
<div class="col-3">
<label for="name_" class="fw-bold">Name</label>
<input type="text" name="name_" id="name_" placeholder="Enter Name" class="form-control" />
</div>
<div class="col-3">
<label for="amount_" class="fw-bold">Amount</label>
<input type="text" name="amount_" id="amount_" placeholder="Enter Amount" class="form-control" onChange="updateAmount()" />
</div>
<div class="col-2">
<label for="employees_" class="fw-bold">Employees</label>
<select name="type1" id="type_" class="form-control">
<option value="">- - Select - -</option>
</select>
</div>
<div class="col-1">
<button type="button" class="btn btn-danger float-right" onclick="deleteDiv(this)">X</button>
</div>
</div>
</div>
</div>
<div id="main">
<div id="div1" class="border border-primary rounded mb-2 mx-2 p-3">
<div class="row">
<div class="col-3">
<label for="dept_1" class="fw-bold">select</label>
<select name="dept_1" id="dept_1" class="form-control" onChange="getEmployees(this)">
<option value="">- - Select - -</option>
<option value="1">Department 1</option>
<option value="2">Department 2</option>
<option value="3">Department 3</option>
</select>
</div>
<div class="col-3">
<label for="name_1" class="fw-bold">Name</label>
<input type="text" name="name_1" id="name_1" placeholder="Enter Name" class="form-control" />
</div>
<div class="col-3">
<label for="amount_1" class="fw-bold">Amount</label>
<input type="text" name="amount_1" id="amount_1" placeholder="Enter Amount" class="form-control" onChange="updateAmount()" />
</div>
<div class="col-2">
<label for="employees_1" class="fw-bold">Employees</label>
<select name="type1" id="type_1" class="form-control">
<option value="">- - Select - -</option>
</select>
</div>
<div class="col-1">
</div>
</div>
</div>
</div>
<div class="fw-bold mb-2 p-2">
Total Amount: <span id="totalAmount">0</span>
</div>
<div class="mb-4 p-2">
<button id="btn0" class="btn btn-primary btn-sm" onClick="AddDiv()">Add Div</button>
</div>
</div>
<script>
// global variable Count to keep track of number of Fields
var fieldsCount = 1;
// Add Div from hidden Div
function AddDiv()
{
// increment Field count
fieldsCount++;
// copy hidden div change name and add to main div
var div0 = document.getElementById('div0');
var div0Clone = div0.cloneNode(true);
div0Clone.id = 'div' + fieldsCount;
div0Clone.style.display = 'block';
// rename input fields
var inputs = div0Clone.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].id = inputs[i].id + fieldsCount;
inputs[i].name = inputs[i].name + fieldsCount;
}
// rename select fields
var selects = div0Clone.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
selects[i].id = selects[i].id + fieldsCount;
selects[i].name = selects[i].name + fieldsCount;
}
document.getElementById('main').appendChild(div0Clone);
// rename label for fields
var labels = div0Clone.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
labels[i].setAttribute('for', labels[i].getAttribute('for') + fieldsCount);
}
}
// Delete the div
function deleteDiv(btn) {
var div = btn.parentNode.parentNode.parentNode;
div.parentNode.removeChild(div);
updateAmount();
}
// Update the Amount
function updateAmount() {
var totalAmount = 0;
// get all the inputs
var inputs = document.getElementsByTagName('input');
// loop through all inputs starts with amount and get amount
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id.startsWith('amount_')) {
var amount = inputs[i].value;
if (amount != '') {
// If amount is a dollar amount or an amount with a decimal.
totalAmount += parseFloat(amount);
// if amount is without decimals.
// totalAmount += parseInt(amount);
}
}
}
// update total amount
document.getElementById("totalAmount").innerHTML = totalAmount;
}
// function to update employee dropdown in div with json data
function getEmployees(id)
{
console.log(id);
}
</script>
<script src="main.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>