-
Notifications
You must be signed in to change notification settings - Fork 54
/
dpucci-assignment2.html
119 lines (118 loc) · 3.73 KB
/
dpucci-assignment2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<!-- there should be an html tag here, but that was my mistake -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script>
function nameValidate()
{
var formChecker = document.forms["Dom's_form"]["Name"].value;
if (formChecker == null || formChecker =="")
{
// changed by Larry Reaves
// alert("Age field cannot be empty.")
alert("Name field cannot be empty.")
return false;
}
// added by larry Reaves
return true;
}
<!-- you can define multiple functions within a single script tag
</script>
<script> -->
function ageValidate()
{
var formChecker = document.forms["Dom's_form"]["Age"].value;
if (formChecker == null || formChecker =="")
{
alert("Age field cannot be empty.")
return false;
}
if(formChecker <= 0 || formChecker >= 200)
{
alert("Age outside valid range, please try again.");
return false;
}
// added by larry Reaves
return true;
}
</script>
<script>
function colorValidate()
{
var formChecker = document.forms["Dom's_form"]["Color"].value;
if (formChecker == null || formChecker =="")
{
alert("Favorite color field cannot be empty.")
return false;
}
return formChecker;
}
// added by Larry Reaves
function validate() {
if (nameValidate() && ageValidate() && colorValidate()) {
return true;
} else {
return false;
}
}
</script>
<title>Dominic Pucci's first website.</title>
<style>
#firstFormat
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<div id="content">
<!-- ** -1 ** multiple forms and validation issues -->
<!-- ** -1 ** no animation -->
<!-- ** -1 ** no DOM manipulation -->
<p id = firstFormat><b>Dominic Pucci: Assignment 2 CS 230</b></p>
<!-- three changes:
method="post"
/ at end of action (necessary to post properly)
"return validate()" rather than "nameValidate()" for onsubmit -->
<form id="Dom's_form" method="post" action="http://symlink.dk/code/php/submit/" onsubmit="return validate()">
<!-- <form id = "Dom's_form" method="get" action = "http://symlink.dk/code/php/submit" onsubmit="nameValidate()"> -->
Full Name: <br></br>
<input type="text" name="Name" id="Name"></input>
<br></br>
<!-- you don't want to start a new form tag for every input variable
<form id = "Dom's_form" method="get" action = "http://symlink.dk/code/php/submit/" onsubmit="ageValidate()">
-->
Age: <br></br>
<input type="text" name="Age" id="Age"></input>
<br></br>
<!--
<form id = "Dom's_form" method="get" action = "http://symlink.dk/code/php/submit/" onsubmit="colorValidate()">
-->
Favorite Color: <br></br>
<input type="text" name="Color" id="Color"></input>
<br></br>
<!-- <form id = "Dom's_form" method="get" action = "http://symlink.dk/code/php/submit/"> -->
What kind of person are you?<br></br>
Dog:<input type="checkbox" name="Dog"></input>
Cat:<input type="checkbox" name="Cat"></input>
<br></br>
<!-- <form id = "Dom's_form" method="get" action = "http://symlink.dk/code/php/submit/"> -->
Favorite food?<br></br>
<!-- generally, you want radio buttons to be mutually exclusive
you can accomplish this by using the same name for each button, but different values for each -->
Pizza<input type="radio" name="Pizza"></input>
Pasta:<input type="radio" name="Pasta"></input>
Soup:<input type="radio" name="Soup"></input>
Sandwiches:<input type="radio" name="Snadwiches"></input>
Other:<input type="radio" name="Other"></input>
<br></br>
<input type="submit"></input>
</form>
<br></br>
</div>
</body>
</html>