1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>OnSubmit Example</title>
6
7 <!--
8 File: D:\cssd.local\E\Student Resources\Website Development I\CodeSamples\OnSubmitExample.html
9 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on June 30, 2022 at 9:02 PM
12
13 This program adds a custom check when the form is submitted to ensure that the course
14 title begins with "CSSD".
15 -->
16
17 <style>
18 h2#title { /* main page title */
19 color: blue ;
20 margin-bottom: 0.2em ;
21 }
22 h3#semester { /* page subtitle (semester dates) */
23 color: blue ;
24 margin-top: 0 ;
25 }
26 .nobot { /* eliminate the bottom margin */
27 margin-bottom: 0 ;
28 }
29 .notop { /* eliminate the top margin */
30 margin-top: 0 ;
31 }
32 </style>
33
34 <script>
35 // function added June 30, 2022
36 var ErrorCheck = function() {
37 // get the input object with ID "CourseTitle"
38 var objCourseTitle = document.getElementById( "CourseTitle" ) ;
39 // get that object's value (for input type="text", this is the text the user entered)
40 var strCourseTitle = objCourseTitle.value ;
41 // get the first four characters of that value (text)
42 var strCourseTitleFirst4 = strCourseTitle.substr( 0, 4 ) ;
43 // check that the first four characters are CSSD (in upper or lower case)
44 if ( strCourseTitleFirst4.toUpperCase() != "CSSD" ) {
45 // if they're not, display a helpful error message ...
46 alert( "The course title must begin with 'CSSD'." ) ;
47 // ... and prohibit submission of the form by returning false
48 return false ;
49 } else {
50 // otherwise, all submission of the form by returning true
51 return true ;
52 }
53 }
54 </script>
55 </head>
56
57 <body>
58 <!-- display the page title and semester dates -->
59 <h2 id="title">Corrections Special School District</h2>
60 <h3 id="semester">Semester: April 4 to June 17, 2022</h3>
61
62 <!-- instructions to the user -->
63 <p><br>
64 <em>Please provide the following information.</em></p>
65
66 <!-- form to create a new table entry -->
67 <!--
68 Note the addition of an onsubmit attribute on June 30, 2022. The only other thing that
69 has changed is that I added defaults for each form element:
70 (a) the Room Number defaults to "1"
71 (b) the Instructor Name defaults to "Jones"
72 (c) the Time Slot defaults to "8:40 AM to 10:00 AM"
73 (d) the Course Title defaults to "CSSD"
74 -->
75 <form method="get" action="OnSubmitExample_Handler.html"
76 onsubmit="return ErrorCheck() ;">
77 <!--
78 The value of the name attribute in each of the following form elements will be the
79 key passed when the form in submitted. This key is what is used to identify each
80 data item.
81 Note that unlike most other attributes, the required attribute does not have a
82 corresponding value. It is used simply on its own.
83 -->
84
85 <!-- spinner form element -->
86 <p>Room Number:
87 <input type="number" name="room" min="1" max="10" step="1"
88 value="1" required></p>
89 <!--
90 Input type number is a spinner. A spinner has minimum, maximum, and step values.
91 Setting the initial value to blank ("") forces the user to enter a value within
92 the specified range.
93 -->
94
95 <!-- select form element (or dropdown list) -->
96 <p>Instructor Name:
97 <select name="instructor" required>
98 <option value="" selected disabled hidden>Choose an instructor</option>
99 <option value="Lees">Lees</option>
100 <option value="Burzycki">Burzycki</option>
101 <option value="Latorella">Latorella</option>
102 <option value="Jones" selected>Jones</option>
103 <option value="Mosher">Mosher</option>
104 <option value="Piper">Piper</option>
105 <option value="Kroll">Kroll</option>
106 <option value="Spires">Spires</option>
107 </select>
108 <!--
109 The first option above prompts the user with instructions. However, this option
110 cannot be selected. The user is forced to select one of the other options.
111 It is also possible to specify how many of the options should initially be
112 visible, but this can sometimes confuse the user into thinking that those are the
113 only options available.
114 -->
115
116 <!-- radio buttons group -->
117 <p class="nobot">Time Slot:</p>
118 <blockquote class="notop">
119 <input type="radio" name="timeslot" value="A" required>
120 <label for="A">7:10 AM to 8:30 AM</label><br>
121 <input type="radio" name="timeslot" value="B" checked>
122 <label for="B">8:40 AM to 10:00 AM</label><br>
123 <input type="radio" name="timeslot" value="C">
124 <label for="C">10:10 AM to 11:30 AM</label><br>
125 <input type="radio" name="timeslot" value="D">
126 <label for="D">11:40 AM to 1:00 PM</label><br>
127 <input type="radio" name="timeslot" value="E">
128 <label for="E">1:10 PM to 2:30 PM</label>
129 </blockquote>
130 <!--
131 Note that here we display the actual times to the user via the label tag. However,
132 the input tag's value attribute specifies only a single letter. Therefore, it is
133 the letter that is passed to the handler page, not the full time string.
134 -->
135
136 <!-- text input form element -->
137 <p>Course Title:
138 <input type="text" name="course" id="CourseTitle" size="40" value="CSSD" required></p>
139 <!--
140 This element allows the user to enter a single line of text.
141 Note the size attribute. This value controls the width of the form, not the
142 number of characters that the user can enter. To limit then number of characters,
143 add a maxlength attribute to the above code.
144 -->
145
146 <!-- the action buttons -->
147 <br>
148 <input type="Reset" value="Start Over">
149 <input type="Submit" value="Submit Class Information">
150 <!--
151 Input type reset returns the form to its initial state. Note that in these two
152 cases, the value attribute specifies the text to be displayed on the buttons.
153 Input type submit checks to make sure that all the required fields have legal
154 values, packages up those values into a query string, and then passes that query
155 string to the page specified in the form tag's action attribute.
156 To do more sophisticated error checking to ensure that all data entered by the
157 user is valid, one can write JavaScript code that will get executed before the data
158 is passed to the handler page.
159 -->
160
161 </form>
162
163 </body>
164
165 </html>
166
167 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
168
169 <!DOCTYPE html>
170 <html>
171 <head>
172 <meta charset="utf-8">
173 <title>Basic Form Handler</title>
174
175 <!--
176 File: \\cssd.local\Student Resources\Website Development I\CodeSamples\OnSubmitExample_Handler.html
177 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
178 copied or excerpted for educational purposes with credit to the author.
179 updated by JMH on June 11, 2022 at 5:29 PM
180
181 updated by JMH on June 30, 2022 at 9:24 PM
182 The only thing that has changed in this file is that the "Return to the Form Page"
183 button returnes to OnSubmitExample.html rather than BasicForm.html.
184 -->
185
186 <script>
187 // define an array of the time slots
188 // Note that the array subscripts can be strings, in this case single letters.
189 arrTimeSlots = new Array() ;
190 arrTimeSlots["A"] = "7:10 AM to 8:30 AM" ;
191 arrTimeSlots["B"] = "8:40 AM to 10:00 AM" ;
192 arrTimeSlots["C"] = "10:10 AM to 11:30 AM" ;
193 arrTimeSlots["D"] = "11:40 AM to 1:00 PM" ;
194 arrTimeSlots["E"] = "1:10 PM to 2:30 PM" ;
195 </script>
196
197 <style>
198 h2#title { /* main page title */
199 color: blue ;
200 margin-bottom: 0.2em ;
201 }
202 h3#semester { /* page subtitle (semester dates) */
203 color: blue ;
204 margin-top: 0 ;
205 }
206 .colorBlue { /* to display text in blue */
207 color: blue ;
208 }
209 </style>
210 </head>
211
212 <body>
213 <!-- display the page title and semester dates -->
214 <h2 id="title">Corrections Special School District</h2>
215 <h3 id="semester">Semester: April 4 to June 17, 2022</h3>
216
217 <script>
218 //// CHECK FOR AND PARSE THE QUERY STRING
219
220 var strQuery = window.location.search ;
221 if ( strQuery == "" ) {
222 document.writeln( "<p><br>" +
223 "<em>You didn’t enter any information. " +
224 "Please click the </em><strong>Return to Form</strong><em> button " +
225 "to try again.</em></p>") ;
226 } else {
227 // This would be a nice place to use a table, but here I have used regular
228 // paragraphs for simplicity.
229 document.writeln( "<p><br>" +
230 "<em>Thank you. You entered the following information.</em></p>" ) ;
231
232 // Note that URLSearchParams is a special type of function called a constructor.
233 // It takes the query string as its argument and constructs an object from which we
234 // can subsequently extract the values entered by the user in the various form fields
235 // on the main form page.
236 var urlParams = new URLSearchParams( strQuery ) ;
237 var strRoomNumber = urlParams.get( "room" ) ;
238 var strInstructorName = urlParams.get( "instructor" ) ;
239 var strCourseTitle = urlParams.get( "course" ) ;
240 var strTimeSlot = arrTimeSlots[ urlParams.get( "timeslot" ) ] ;
241
242 // display the data entered by the user
243 document.writeln( "<p>Room Number: <strong class='colorBlue'>" +
244 strRoomNumber + "</strong>" ) ;
245 document.writeln( "<p>Instructor Name: <strong class='colorBlue'>" +
246 strInstructorName + "</strong>" ) ;
247 document.writeln( "<p>Course Title: <strong class='colorBlue'>" +
248 strCourseTitle + "</strong>" ) ;
249 document.writeln( "<p>Time Slot: <strong class='colorBlue'>" +
250 strTimeSlot + "</strong>" ) ;
251 }
252 </script>
253
254 <p><br>
255 <input type="button" value="Return to the Form Page"
256 onclick="window.location.replace( 'OnSubmitExample.html' ) ;"></p>
257 </body>
258
259 </html>