-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
115 lines (102 loc) · 3.68 KB
/
contact.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Photography Club Contact</title>
<!-- Date: 2011-12-14 -->
</head>
<body>
<!-- jquery stylesheet and files from google cdn -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
<script type="text/javascript">
function validateName(){
var given_username = $('#name').val();
if(given_username.length < 1){
$('#name').addClass('error');
return false;
}else{
$('#name').removeClass('error');
return true;
}
};
function validateDOB(){
var given_pass = $('#dob').val();
if(given_pass.length < 1 ){
$('#dob').addClass('error');
return false;
}else{
$('#dob').removeClass('error');
return true;
}
};
function validateMessage(){
var given_username = $('#message').val();
if(given_username.length < 1){
$('#message').addClass('error');
return false;
}else{
$('#message').removeClass('error');
return true;
}
};
function validateHerd(){
var given_pass = $('#herd').val();
if(given_pass.length < 1 ){
$('#herd').addClass('error');
return false;
}else{
$('#herd').removeClass('error');
return true;
}
};
$(document).ready(function() {
$('#nav').load("nav.html");
$( "#dob" ).datepicker({dateFormat: 'MM d, yy'});
$('#name').blur(validateName);
$('#dob').blur(validateDOB);
$('#message').blur(validateMessage);
$('#herd').blur(validateHerd);
$("#holiday_button").click(function(){
$("holiday_message").load("holiday.html");
});
$('#contact_us_form').submit(function() {
if (validateName() && validateDOB() && validateMessage() && validateHerd()){
alert('Hi! ' + $('#name').val() + ', your message \''+$('#message').val()+ '\' has been processed and we will get back to you. Its great you herd of us through '+$('#herd')+'. Take care.');
}
return false;
});
});
</script>
<div id="nav" page="contact"></div>
<div id="container">
<h1>Contact Us </h1>
<p>Please Fill out the following form and we will get back to you as soon as possible.</p>
<form id="contact_us_form">
<label>Name :</label> <input id="name" type="textarea"/>
<br/>
<label>Date of Birth :</label> <input id="dob" type="text" class="date_picker">
<br/>
<label>Member?</label> <input id="member" type="checkbox" name="member" value="Yes" />
<br/>
<label>Message :</label> <textarea id="message" rows="20" col="50"></textarea>
<br/>
<label>How did you hear about us :</label> <textarea id="herd" rows="20" col="50"></textarea>
<br/>
<label>Had a Pleasant Experieance?</label>
<select id="experiance">
<options value="yes">Yes</options>
<options value="no" >No</options>
</select>
<br/>
<input id="login" type="submit" value="Login">
</form>
<button id="holiday_button">Click here to see what santa has to say</button>
<div id="holiday_message">
</div>
<div>
</body>
</html>