· 7 years ago · Nov 10, 2018, 06:32 PM
1<!doctype html>
2<html>
3
4 <head>
5 <style>
6 label {
7 width: 60px;
8 text-align: right;
9 padding-right: 5px;
10 display: inline-block;
11 }
12 input[type="number"] {
13 width:50px;
14 margin-right: 25px;
15 }
16 </style>
17 </head>
18
19 <body onload="addForm();">
20
21 <h1>Add new input lines to HTML entry form</h1>
22
23 <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>
24
25 <button type="button" onclick="addLine();">Add Line</button>
26 <br />
27 <br />
28
29 <div id="div1">
30 </div>
31
32 <h1>Generate array of objects</h1>
33
34 <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>
35
36 <button type="button" onclick="genObjectArray();">Generate and Display Array of Objects</button>
37 <br />
38
39 <div id="div2">
40 </div>
41
42 <h1>Display table containing data from array of objects</h1>
43
44 <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>
45
46 <button type="button" onclick="">Generate and Display Table</button>
47 <br />
48
49 <div id="div3">
50 </div>
51
52 <!-- 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. -->
53
54 <script>
55
56// GLOBAL VARIABLES
57
58var currentLine = 0;
59var inputWidth = 10;
60var objArray = [];
61
62// FUNCTIONS
63
64/* addForm()
65 * appends an entry form to an HTML element with id="div1"
66 */
67function addForm() {
68 // precondition: HTML must contain <div id="div1"> element
69
70 // create a new form element, and append to div1
71 var newelement = document.createElement("form");
72 newelement.setAttribute("id","form1");
73 var div1 = document.getElementById("div1");
74 div1.appendChild(newelement);
75
76 // create a new fieldset element, and append to form1
77 var newelement = document.createElement("fieldset");
78 newelement.setAttribute("id","fieldset1");
79 var form1 = document.getElementById("form1");
80 form1.appendChild(newelement);
81
82 // create a new legend element, and append to fieldset1
83 var newelement = document.createElement("legend");
84 var textnode = document.createTextNode("People ");
85 newelement.appendChild(textnode);
86 var fieldset1 = document.getElementById("fieldset1");
87 fieldset1.appendChild(newelement);
88
89 // create a new label element, and append to fieldset1
90 var newelement = document.createElement("label");
91 newelement.setAttribute("for","gname"+currentLine);
92 var textnode = document.createTextNode("Given Name");
93 newelement.appendChild(textnode);
94 var fieldset1 = document.getElementById("fieldset1");
95 fieldset1.appendChild(newelement);
96
97 // create a new input element, and append to fieldset1
98 var newelement = document.createElement("input");
99 newelement.setAttribute("name","gname"+currentLine);
100 newelement.setAttribute("id","gname"+currentLine);
101 newelement.setAttribute("type","text");
102 newelement.setAttribute("size",10);
103 if (currentLine==0) newelement.setAttribute("autofocus","autofocus");
104 var fieldset1 = document.getElementById("fieldset1");
105 fieldset1.appendChild(newelement);
106
107 // add more fields
108 addField("fieldset1", "sname", "Surname", "text", "", inputWidth);
109 addField("fieldset1", "solarbd", "Solar Birth Day", "number", "", inputWidth);
110 addField("fieldset1", "solarbm", "Solar Birth Month", "number", "", inputWidth);
111 addField("fieldset1", "solarby", "Solar Birth Year", "number", "", inputWidth);
112 addField("fieldset1", "country", "Country", "text", "", inputWidth);
113
114 // add line break
115 var newelement = document.createElement("br");
116 var fieldset1 = document.getElementById("fieldset1");
117 fieldset1.appendChild(newelement);
118
119 // increment line counter
120 currentLine++;
121}
122
123/* addLine()
124 * inserts all labels and input elements for one row of a form
125 */
126function addLine () {
127 // precondition: inputWidth global variable must be set
128 // precondition: call from addForm() so HTML element with id="fieldset1" exists
129 addField("fieldset1", "gname", "Given Name", "text", "", inputWidth);
130 addField("fieldset1", "sname", "Surname", "text", "", inputWidth);
131 addField("fieldset1", "solarbd", "Solar Birth Day", "number", "", inputWidth);
132 addField("fieldset1", "solarbm", "Solar Birth Month", "number", "", inputWidth);
133 addField("fieldset1", "solarby", "Solar Birth Year", "number", "", inputWidth);
134 addField("fieldset1", "country", "Country", "text", "", inputWidth);
135 var newelement = document.createElement("br");
136 var fieldset1 = document.getElementById("fieldset1");
137 fieldset1.appendChild(newelement);
138 currentLine++;
139}
140
141/* addField()
142 * inserts one label one input element into a row of a form
143 */
144function addField(formId, namePrefix, labelText, dataType, placeholder, fieldSize) {
145 // precondition: currentLine (global variable) must be set
146 // precondition: objArray[] (global variable) must be declared
147 // precondition: call from addLine() so HTML element with id=formID exists
148
149 // create a new label element, and append to form (or fieldset)
150 var n = document.createElement("label");
151 n.setAttribute("for",namePrefix+currentLine);
152 var t = document.createTextNode(labelText + " " );
153 n.appendChild(t);
154 var f = document.getElementById(formId);
155 f.appendChild(n);
156
157 // create a new input element, and append to form
158 var n = document.createElement("input");
159 n.setAttribute("name",namePrefix+currentLine);
160 n.setAttribute("id",namePrefix+currentLine);
161 n.setAttribute("type",dataType);
162 n.setAttribute("placeholder",placeholder);
163 n.setAttribute("size",fieldSize);
164 var f = document.getElementById(formId);
165 f.appendChild(n);
166
167}
168
169/* genObjectArray()
170 * generates content for an array of objects,
171 * where each element of the array
172 * is an object containing the data entered in one line of the form
173 */
174function genObjectArray() {
175 // precondition: HTML must contain <div id="div2"> element
176 // precondition: currentLine (global variable) must be set
177
178 // generate objArray from HTML form elements
179 for(i = 0; i < currentLine; i++) {
180 objArray[i] = {
181 'gname' :document.getElementById("gname"+i).value,
182 'sname' :document.getElementById("sname"+i).value,
183 'solarbd' :parseInt(document.getElementById("solarbd"+i).value), //?parseInt(document.getElementById("solarbd"+i).value):0,
184 'solarbm' :parseInt(document.getElementById("solarbm"+i).value),
185 'solarby' :parseInt(document.getElementById("solarby"+i).value),
186 'country' :document.getElementById("country"+i).value,
187 'countryAge':function () {
188 var today = new Date();
189 this.solarbm = this.solarbm - 1;
190 var birthDate = new Date(this.solarby, this.solarbm, this.solarbd);
191 var age = today.getFullYear() - birthDate.getFullYear();
192 var m = today.getMonth() - birthDate.getMonth();
193 if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
194 age--;
195 }
196 if('China'==this.country)
197 return age + 1;
198 else
199 return age;
200 },
201 'localName':function () {
202 if('China'==this.country)
203 return this.sname + ' ' + this.gname;
204 else
205 return this.gname + ' ' + this.sname;
206 },
207 'zodiacSign':function () {
208 if('China'==this.country){
209 var cZodiacs = ["Monkey", "Cock", "Dog", "Boar", "Rat", "Ox", "Tiger", "Rabbit", "Dragon", "Snake", "Horse", "Sheep"];
210 return cZodiacs[(this.solarby % cZodiacs.length)];
211 }else{
212 var wZodiacs = ["Capricorn", "Aquarius", "Pisces", "Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius"];
213 switch(this.solarbm) {
214 case 1://January
215 if(this.solarbd < 20)
216 return wZodiacs[0];
217 else
218 return wZodiacs[1];
219 break;
220 case 2://February
221 if(this.solarbd < 19)
222 return wZodiacs[1];
223 else
224 return wZodiacs[2];
225 break;
226 case 3://March
227 if(this.solarbd < 21)
228 return wZodiacs[2];
229 else
230 return wZodiacs[3];
231 break;
232 case 4://April
233 if(this.solarbd < 20)
234 return wZodiacs[3];
235 else
236 return wZodiacs[4];
237 break;
238 case 5://May
239 if(this.solarbd < 21)
240 return wZodiacs[4];
241 else
242 return wZodiacs[5];
243 break;
244 case 6://June
245 if(this.solarbd < 21)
246 return wZodiacs[5];
247 else
248 return wZodiacs[6];
249 break;
250 case 7://July
251 if(this.solarbd < 23)
252 return wZodiacs[6];
253 else
254 return wZodiacs[7];
255 break;
256 case 8://August
257 if(this.solarbd < 23)
258 return wZodiacs[7];
259 else
260 return wZodiacs[8];
261 break;
262 case 9://September
263 if(this.solarbd < 23)
264 return wZodiacs[8];
265 else
266 return wZodiacs[9];
267 break;
268 case 10://October
269 if(this.solarbd < 23)
270 return wZodiacs[9];
271 else
272 return wZodiacs[10];
273 break;
274 case 11://November
275 if(this.solarbd < 22)
276 return wZodiacs[10];
277 else
278 return wZodiacs[11];
279 break;
280 case 12://December
281 if(this.solarbd < 22)
282 return wZodiacs[11];
283 else
284 return wZodiacs[0];
285 break;
286 default:
287 return 'FUCK';
288 break;
289 }
290 }
291 }
292 };
293 }
294
295 // display objArray
296 var divContent = "<ol start='0'>";
297 objArray.forEach(function(e) {
298 divContent += '<li>';
299 divContent += JSON.stringify(e);
300 divContent += ' ... countryAge() == ' + e.countryAge();
301 divContent += ' ... localName() == ' + e.localName();
302 divContent += ' ... zodiacSign() == ' + e.zodiacSign();
303 divContent += '</li>';
304 });
305 divContent += "</ol>";
306 document.getElementById("div2").innerHTML = divContent;
307}
308
309/* genTable()
310 * generates an HTML table containing localized output from
311 */
312 function genTable() {
313
314 }
315
316 </script>
317
318 </body>
319
320 </html>