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