· 7 years ago · Nov 11, 2018, 03:24 AM
1<!doctype html>
2<html>
3
4 <head>
5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
8 </script>
9
10 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
11 </script>
12
13 <style>
14 label {
15 text-align: right;
16 padding: 5px;
17 display: inline-block;
18 }
19 input[type="number"] {
20 width:60px;
21 margin-right: 25px;
22 }
23 fieldset {
24 margin-left: 2px;
25 margin-right: 5px;
26 padding-top: 0.35em;
27 padding-bottom: 0.625em;
28 padding-left: 0.75em;
29 padding-right: 0.75em;
30 border: 2px solid;
31 }
32 h1 {
33 display: block;
34 font-size: 2em;
35 margin-top: 0.67em;
36 margin-bottom: 0.67em;
37 margin-left: 5px;
38 margin-right: 0;
39 font-weight: bold;
40 }
41 p {
42 margin-left: 5px;
43 }
44 button {
45 margin-left: 5px;
46 }
47 </style>
48 </head>
49
50 <body onload="addForm();">
51
52 <h1>Add new input lines to HTML entry form</h1>
53
54 <p>Enable users to add a row of fields to an HTML input form. In this code, after the HTML loads, addForm() is called. Clicking the Add Line button calls a function, addLine(), which calls addField() once for each field in the new input line. The elements, label and input, are formatted using CSS. </p>
55
56 <button type="button" onclick="addLine();">Add Line</button>
57 <br />
58 <br />
59
60 <div id="div1">
61 </div>
62
63 <h1>Generate array of objects</h1>
64
65 <p>Loop through the HTML form lines and store the data into an array of objects, where each property of an object contains the data in the input field of the HTML entry form. </p>
66
67 <button type="button" onclick="genObjectArray();">Generate and Display Array of Objects</button>
68 <br />
69
70 <div id="div2">
71 </div>
72
73 <h1>Display table containing data from array of objects</h1>
74
75 <p>Loop through the HTML form lines and store the data into an array of objects, where each property of an object contains the data in the input field of the HTML entry form. </p>
76
77 <button type="button" onclick="genTable();">Generate and Display Table</button>
78 <br />
79
80 <div id="div3">
81 </div>
82
83 <!-- The table, below, shows examples of data. Do not include any HTML-coded table in your code. Instead, use JavaScript to append a table to the div, above. -->
84
85 <script>
86
87// GLOBAL VARIABLES
88
89var currentLine = 0;
90var inputWidth = 10;
91var objArray = [];
92
93// FUNCTIONS
94
95/* addForm()
96 * appends an entry form to an HTML element with id="div1"
97 */
98function addForm() {
99 // precondition: HTML must contain <div id="div1"> element
100
101 // create a new form element, and append to div1
102 var newelement = document.createElement("form");
103 newelement.setAttribute("id","form1");
104 var div1 = document.getElementById("div1");
105 div1.appendChild(newelement);
106
107 // create a new fieldset element, and append to form1
108 var newelement = document.createElement("fieldset");
109 newelement.setAttribute("id","fieldset1");
110 var form1 = document.getElementById("form1");
111 form1.appendChild(newelement);
112
113 // create a new legend element, and append to fieldset1
114 var newelement = document.createElement("legend");
115 var textnode = document.createTextNode("People ");
116 newelement.appendChild(textnode);
117 var fieldset1 = document.getElementById("fieldset1");
118 fieldset1.appendChild(newelement);
119
120 // create a new label element, and append to fieldset1
121 var newelement = document.createElement("label");
122 newelement.setAttribute("for","gname"+currentLine);
123 var textnode = document.createTextNode("Given Name:");
124 newelement.appendChild(textnode);
125 var fieldset1 = document.getElementById("fieldset1");
126 fieldset1.appendChild(newelement);
127
128 // create a new input element, and append to fieldset1
129 var newelement = document.createElement("input");
130 newelement.setAttribute("name","gname"+currentLine);
131 newelement.setAttribute("id","gname"+currentLine);
132 newelement.setAttribute("type","text");
133 newelement.setAttribute("size",10);
134 if (currentLine==0) newelement.setAttribute("autofocus","autofocus");
135 var fieldset1 = document.getElementById("fieldset1");
136 fieldset1.appendChild(newelement);
137
138 // add more fields
139 addField("fieldset1", "sname", "Surname", "text", "", inputWidth);
140 addField("fieldset1", "solarbd", "Solar Birth Day", "number", "", inputWidth);
141 addField("fieldset1", "solarbm", "Solar Birth Month", "number", "", inputWidth);
142 addField("fieldset1", "solarby", "Solar Birth Year", "number", "", inputWidth);
143 addSelect("fieldset1", "country", "Country", "text");
144
145 // add line break
146 var newelement = document.createElement("br");
147 var fieldset1 = document.getElementById("fieldset1");
148 fieldset1.appendChild(newelement);
149
150 // increment line counter
151 currentLine++;
152}
153
154/* addLine()
155 * inserts all labels and input elements for one row of a form
156 */
157function addLine () {
158 // precondition: inputWidth global variable must be set
159 // precondition: call from addForm() so HTML element with id="fieldset1" exists
160 addField("fieldset1", "gname", "Given Name", "text", "", inputWidth);
161 addField("fieldset1", "sname", "Surname", "text", "", inputWidth);
162 addField("fieldset1", "solarbd", "Solar Birth Day", "number", "", inputWidth);
163 addField("fieldset1", "solarbm", "Solar Birth Month", "number", "", inputWidth);
164 addField("fieldset1", "solarby", "Solar Birth Year", "number", "", inputWidth);
165 addSelect("fieldset1", "country", "Country", "text");
166 var newelement = document.createElement("br");
167 var fieldset1 = document.getElementById("fieldset1");
168 fieldset1.appendChild(newelement);
169 currentLine++;
170}
171
172/* addField()
173 * inserts one label one input element into a row of a form
174 */
175function addField(formId, namePrefix, labelText, dataType, placeholder, fieldSize) {
176 // precondition: currentLine (global variable) must be set
177 // precondition: objArray[] (global variable) must be declared
178 // precondition: call from addLine() so HTML element with id=formID exists
179
180 // create a new label element, and append to form (or fieldset)
181 var n = document.createElement("label");
182 n.setAttribute("for",namePrefix+currentLine);
183 var t = document.createTextNode(labelText + ":" );
184 n.appendChild(t);
185 var f = document.getElementById(formId);
186 f.appendChild(n);
187
188 // create a new input element, and append to form
189 var n = document.createElement("input");
190 n.setAttribute("name",namePrefix+currentLine);
191 n.setAttribute("id",namePrefix+currentLine);
192 n.setAttribute("type",dataType);
193 n.setAttribute("placeholder",placeholder);
194 n.setAttribute("size",fieldSize);
195 var f = document.getElementById(formId);
196 f.appendChild(n);
197}
198
199/* addSelect()
200 * inserts a drop downlist into the field set to select the country from
201 */
202function addSelect(formId, namePrefix, labelText, dataType) {
203 var countries = ["USA", "China"];
204
205 var n = document.createElement("label");
206 n.setAttribute("for",namePrefix+currentLine);
207 var t = document.createTextNode(labelText + ":");
208 n.appendChild(t);
209 var f = document.getElementById(formId);
210 f.appendChild(n);
211
212 var n = document.createElement("select");
213 n.setAttribute("name",namePrefix+currentLine);
214 n.setAttribute("id",namePrefix+currentLine);
215 n.setAttribute("type",dataType);
216 var f = document.getElementById(formId);
217 f.appendChild(n);
218
219 for (var i = 0; i < countries.length; i++) {
220 var option = document.createElement("option");
221 option.setAttribute("value", countries[i]);
222 option.text = countries[i];
223 n.appendChild(option);
224 }
225}
226
227/* genObjectArray()
228 * generates content for an array of objects,
229 * where each element of the array
230 * is an object containing the data entered in one line of the form
231 */
232function genObjectArray() {
233 // precondition: HTML must contain <div id="div2"> element
234 // precondition: currentLine (global variable) must be set
235
236 // generate objArray from HTML form elements
237 for(i = 0; i < currentLine; i++) {
238 objArray[i] = {
239 'gname' :document.getElementById("gname"+i).value,
240 'sname' :document.getElementById("sname"+i).value,
241 'solarbd' :parseInt(document.getElementById("solarbd"+i).value),
242 'solarbm' :parseInt(document.getElementById("solarbm"+i).value),
243 'solarby' :parseInt(document.getElementById("solarby"+i).value),
244 'country' :document.getElementById("country"+i).value,
245 'localAge':function () {
246 var today = new Date();
247 var month = this.solarbm;
248 month = this.solarbm - 1;
249 var birthDate = new Date(this.solarby, month, this.solarbd);
250 var age = today.getFullYear() - birthDate.getFullYear();
251 var m = today.getMonth() - birthDate.getMonth();
252 if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
253 age--;
254 }
255 if('China'===this.country)
256 return age + 1;
257 else
258 return age;
259 },
260 'localName':function () {
261 if('China'===this.country)
262 return this.sname + ' ' + this.gname;
263 else
264 return this.gname + ' ' + this.sname;
265 },
266 'localZodiac':function () {
267 if('China'===this.country){
268 var cZodiacs = ["Monkey", "Cock", "Dog", "Boar", "Rat", "Ox", "Tiger", "Rabbit", "Dragon", "Snake", "Horse", "Sheep"];
269 return cZodiacs[(this.solarby % cZodiacs.length)];
270 }else{
271 var wZodiacs = ["Capricorn", "Aquarius", "Pisces", "Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius"];
272 switch(this.solarbm) {
273 case 1://JanuaryS
274 if(this.solarbd < 20)
275 return wZodiacs[0];
276 else
277 return wZodiacs[1];
278 break;
279 case 2://February
280 if(this.solarbd < 19)
281 return wZodiacs[1];
282 else
283 return wZodiacs[2];
284 break;
285 case 3://March
286 if(this.solarbd < 21)
287 return wZodiacs[2];
288 else
289 return wZodiacs[3];
290 break;
291 case 4://April
292 if(this.solarbd < 20)
293 return wZodiacs[3];
294 else
295 return wZodiacs[4];
296 break;
297 case 5://May
298 if(this.solarbd < 21)
299 return wZodiacs[4];
300 else
301 return wZodiacs[5];
302 break;
303 case 6://June
304 if(this.solarbd < 21)
305 return wZodiacs[5];
306 else
307 return wZodiacs[6];
308 break;
309 case 7://July
310 if(this.solarbd < 23)
311 return wZodiacs[6];
312 else
313 return wZodiacs[7];
314 break;
315 case 8://August
316 if(this.solarbd < 23)
317 return wZodiacs[7];
318 else
319 return wZodiacs[8];
320 break;
321 case 9://September
322 if(this.solarbd < 23)
323 return wZodiacs[8];
324 else
325 return wZodiacs[9];
326 break;
327 case 10://October
328 if(this.solarbd < 23)
329 return wZodiacs[9];
330 else
331 return wZodiacs[10];
332 break;
333 case 11://November
334 if(this.solarbd < 22)
335 return wZodiacs[10];
336 else
337 return wZodiacs[11];
338 break;
339 case 12://December
340 if(this.solarbd < 22)
341 return wZodiacs[11];
342 else
343 return wZodiacs[0];
344 break;
345 default:
346 return 'Zodiac Unknown';
347 break;
348 }
349 }
350 },
351 localDOB:function() {
352 if('China'===this.country)
353 return this.solarby + '-' + this.solarbm + '-' + this.solarbd;
354 else
355 return this.solarbm + '-' + this.solarbd + '-' + this.solarby;
356 }
357 };
358 }
359
360 // display objArray
361 var divContent = "<ol start='0'>";
362 objArray.forEach(function(e) {
363 divContent += '<li>';
364 divContent += JSON.stringify(e);
365 divContent += ' ... localAge() == ' + e.localAge();
366 divContent += ' ... localName() == ' + e.localName();
367 divContent += ' ... localZodiac() == ' + e.localZodiac();
368 divContent += ' ... localDOB() == ' + e.localDOB();
369 divContent += '</li>';
370 });
371 divContent += "</ol>";
372 document.getElementById("div2").innerHTML = divContent;
373}
374
375/* genTable()
376 * generates an HTML table containing localized output from the objectArray
377 */
378 function genTable() {
379 //Clears Table
380 var div3 = document.getElementById("div3");
381 while(div3.firstChild){
382 div3.removeChild(div3.firstChild);
383 }
384
385 genObjectArray();
386
387 //Create a new table
388 var table = document.createElement("table");
389 table.setAttribute("id", "table1");
390 table.setAttribute("class", "table table-striped table-bordered");
391 div3.appendChild(table);
392
393 //Create col headers
394 var header = document.getElementById("table1");
395 var row = header.insertRow(0);
396 var cell = row.insertCell(0);
397 var textNode = document.createTextNode("Local Name");
398 cell.appendChild(textNode);
399
400 cell = row.insertCell(1);
401 textNode = document.createTextNode("Local DOB");
402 cell.appendChild(textNode);
403
404 cell = row.insertCell(2);
405 textNode = document.createTextNode("Local Age");
406 cell.appendChild(textNode);
407
408 cell = row.insertCell(3);
409 textNode = document.createTextNode("Local Zodiac");
410 cell.appendChild(textNode);
411
412 for(var i = 0; i < objArray.length; i++) {
413 row = table.insertRow(i + 1);
414
415 cell = row.insertCell(0);
416 textNode = document.createTextNode(objArray[i].localName());
417 cell.appendChild(textNode);
418
419 cell = row.insertCell(1);
420 textNode = document.createTextNode(objArray[i].localDOB());
421 cell.appendChild(textNode);
422
423 cell = row.insertCell(2);
424 textNode = document.createTextNode(objArray[i].localAge());
425 cell.appendChild(textNode);
426
427 cell = row.insertCell(3);
428 textNode = document.createTextNode(objArray[i].localZodiac());
429 cell.appendChild(textNode);
430 }
431 }
432
433 </script>
434
435 </body>
436
437 </html>