I am working on a javascript problem im trying to make a chr
I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions :
one enter your name , enter if your a male or female , ask if you have been naughty or nice , if the user enters nice you configure from now to christmas how many days christmas is then you are taken to a page that uses a GIF of santa have a merry christmas , if naughty you are taken to a page with a naughty GIF image with
a description of some sorts why you have been naughty .
this javascript assignment needs At least one form with at least three different types of controls on the form (textbox, radio buttons, check boxes, submit/reset button).
Data validation for the form (Chapter 11)
Three or more functions (Chapter 7)
Cookies - Select three items on the form and build cookies that will last for 7 months (Chapter 16)
Some of the date methods from Chapter 9
The project must be uploaded to the SWIC server
Some animation would be nice (Chapter 10 setInterval() or setTimeout() functions could be used to satisfy this)
Solution
I try to give you most of code that can be use in this assigment :-
Code for UI
1) test.html
<!DOCTYPE html>
<html lang=\"en\"><head>
<meta charset=\"utf-8\">
<title>JavaScript christmas theme</title>
<link rel=\'stylesheet\' href=\'js-form-validation.css\' type=\'text/css\' />
<script src=\"sample-registration-form-validation.js\"></script>
</head>
<body onload=\"document.registration.username.focus();\">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name=\'registration\' onSubmit=\"return formValidation();\">
<ul>
<li><label for=\"Name\">Name:</label></li>
<li><input type=\"text\" name=\"username\" size=\"50\" /></li>
<li><label id=\"gender\">Sex:</label></li>
<li><input type=\"radio\" name=\"msex\" value=\"Male\" /><span>Male</span></li>
<li><input type=\"radio\" name=\"fsex\" value=\"Female\" /><span>Female</span></li>
<li><label>You are naughty or nice:</label></li>
<li><input type=\"checkbox\" name=\"en\" value=\"naughty\" checked /><span>Naughty</span></li>
<li><input type=\"checkbox\" name=\"nonen\" value=\"nice\" /><span>Nice</span></li>
<li><input type=\"submit\" name=\"submit\" value=\"Submit\" /></li>
</ul>
</form>
</body>
</html>
This is code to validate user input fileds
2) sample-registration-form-validation.js
function formValidation()
{
var uname = document.registration.username;
var ucountry = document.registration.country;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex;
if(allLetter(uname))
{
if(validsex(umsex,ufsex))
{
}
}
return false;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert(\'Name must have alphabet characters only\');
uname.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == \"Default\")
{
alert(\'Select your country from the list\');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert(\"You have entered an invalid email address!\");
uemail.focus();
return false;
}
} function validsex(umsex,ufsex)
{
x=0;
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert(\'Select Male/Female\');
umsex.focus();
return false;
}
else
{
alert(\'Form Succesfully Submitted\');
window.location.reload()
return true;
}
}
3) js-form-validation.css
Code to show data on UI
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
form ul li input, select, span {
float: left;
margin-bottom: 10px;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}
[type=\"submit\"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
p {
margin-left: 70px;
font-weight: bold;
}
Funtion to redirect user after click on nice or naughty
<script>
jQuery(document).ready(function($) {
$(\'#idfornaughty\').click(function(e) {
window.open(naughtygifURL);
}
$(\'#idfornice\').click(function(e) {
window.open(nicegifURL);
}
}
Above code is also contain some additional validation field if you want to add some more information. Please let me know if you have any difficulty.



