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
198 <style>
199 h2#title { /* main page title */
200 color: blue ;
201 margin-bottom: 0.2em ;
202 }
203 h3#semester { /* page subtitle (semester dates) */
204 color: blue ;
205 margin-top: 0 ;
206 }
207 .colorBlue { /* to display text in blue */
208 color: blue ;
209 }
210 </style>
211 </head>
212
213 <body>
214 <!-- display the page title and semester dates -->
215 <h2 id="title">Corrections Special School District</h2>
216 <h3 id="semester">Semester: April 4 to June 17, 2022</h3>
217
218 <script>
219 //// CHECK FOR AND PARSE THE QUERY STRING
220
221 var strQuery = window.location.search ;
222 if ( strQuery == "" ) {
223 document.writeln( "<p><br>" +
224 "<em>You didn’t enter any information. " +
225 "Please click the </em><strong>Return to Form</strong><em> button " +
226 "to try again.</em></p>") ;
227 } else {
228 // This would be a nice place to use a table, but here I have used regular
229 // paragraphs for simplicity.
230 document.writeln( "<p><br>" +
231 "<em>Thank you. You entered the following information.</em></p>" ) ;
232
233 // Note that URLSearchParams is a special type of function called a constructor.
234 // It takes the query string as its argument and constructs an object from which we
235 // can subsequently extract the values entered by the user in the various form fields
236 // on the main form page.
237 var urlParams = new URLSearchParams( strQuery ) ;
238 var strRoomNumber = urlParams.get( "room" ) ;
239 var strInstructorName = urlParams.get( "instructor" ) ;
240 var strCourseTitle = urlParams.get( "course" ) ;
241 var strTimeSlot = arrTimeSlots[ urlParams.get( "timeslot" ) ] ;
242
243 // display the data entered by the user
244 document.writeln( "<p>Room Number: <strong class='colorBlue'>" +
245 strRoomNumber + "</strong>" ) ;
246 document.writeln( "<p>Instructor Name: <strong class='colorBlue'>" +
247 strInstructorName + "</strong>" ) ;
248 document.writeln( "<p>Course Title: <strong class='colorBlue'>" +
249 strCourseTitle + "</strong>" ) ;
250 document.writeln( "<p>Time Slot: <strong class='colorBlue'>" +
251 strTimeSlot + "</strong>" ) ;
252 }
253 </script>
254
255 <p><br>
256 <input type="button" value="Return to the Form Page"
257 onclick="window.location.replace( 'OnSubmitExample.html' ) ;"></p>
258 </body>
259
260 </html>