Hi
I have a JS file and 2 HTML files. The conf.html file is a form that when submitted, should generate a confirmation page which is summary.html. Everything seems to be fine except for 2 things.
1: The conf.html form should not be allowed to submit if required areas are not filled out, but it does.
&
2: The cost of the conference detailed on the summary.html page should include a $25.00 discount if you have checked that you are a member. This is not happening.
Any help would be great. Thanks.
Conf.html file
Code:
<title>Conference Registration Form</title>
<link href="conf.css" rel="stylesheet" type="text/css" />
<script type ="text/javascript" src="forms.js"></script>
</head>
<body>
<form id="reg" method="get" action="summary.html" onsubmit="return submitForm();">
<div id="links"><img src="links.jpg" alt="" /></div>
<div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
<div id="edge"><img src="edge.jpg" alt="" /></div>
<div id="main">
<p id="intro">
<b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
University of Colorado, Boulder<br />
March 3 - March 7<br />
Conference Fee: $145
</p>
<h1>Conference Registration Form</h1>
<input type="hidden" id="total" name="total" />
<table>
<tr>
<td><span>*</span>First Name</td>
<td><input name="fname" id="fname" /></td>
<td style="text-align: right"><span>*</span>Last</td>
<td><input name="lname" id="lname" /></td>
</tr>
<tr>
<td id="add"><span>*</span>Address</td>
<td colspan="3"><textarea id="address" name="address" rows="" cols=""></textarea></td>
</tr>
<tr>
<td><span>*</span>E-mail</td>
<td colspan="3"><input name="email" id="email" /></td>
</tr>
<tr>
<td><span>*</span>Phone Number</td>
<td colspan="3">
<input id="phone1" name="phone1" size="3" />
<input id="phone2" name="phone2" size="3" /> -
<input id="phone3" name="phone3" size="4" />
</td>
</tr>
<tr>
<td colspan="3">Number attending banquet (add $30 per person)</td>
<td>
<select id="guests" name="guests" onchange="calcCost();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
<tr>
<td colspan="3"><span>*</span>Member of ACGIP (save $25 on registration fee)</td>
<td>
<input type="radio" name="member" value="yes" /> Yes
<input type="radio" name="member" value="no" /> No
</td>
</tr>
</table>
<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="continue" /></p>
</div>
</form>
</body>
</html>
Summary.html file
Code:
<title>Conference Summary Page</title>
<link href="summary.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var searchString = window.location.search.slice(1);
var formString = searchString.replace(/\+/g, " ");
var dataString = unescape(formString);
var data = dataString.split(/[&=]/g);
</script>
</head>
<body>
<div id="links"><img src="links.jpg" alt="" /></div>
<div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
<div id="edge"><img src="edge.jpg" alt="" /></div>
<div id="main">
<p id="intro">
<b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
University of Colorado, Boulder<br />
March 3 - March 7<br />
Conference Fee: $145
</p>
<table id="summary">
<tr><td colspan="2"><h3>Registration Summary</h3></td></tr>
<tr>
<td>Total Conference Cost:</td>
<td>
<script type="text/javascript">
document.write("$" + data[1]);
</script>
</td>
</tr>
<tr>
<td>Name:</td>
<td>
<script type="text/javascript">
document.write(data[3] + " " + data[5]);
</script>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<script type="text/javascript">
reg = /[\n]/g;
var address = data[7].replace(reg,"<br />");
document.write(address);
</script>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<script type="text/javascript">
document.write(data[9]);
</script>
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<script type="text/javascript">
document.write("(" + data[11] + ")" + data[13] + "-" + data[15]);
</script>
</td>
</tr>
<tr>
<td>Attending Banquet ($30 per person):</td>
<td>
<script type="text/javascript">
document.write(data[17]);
</script>
</td>
</tr>
<tr>
<td>ACGIP Member (save $25):</td>
<td>
<script type="text/javascript">
document.write(data[19]);
</script>
</td>
</tr>
</table>
<p>Print this page and retain it for your records.</p>
</div>
</body>
</html>
JS file
Code:
window.onload = init; //runs the init function on page load
function init(){
document.forms[0].onsubmit = submitForm;
}
function calcCost(){
var cost =145;
var guests = document.forms[0].guests.value;
cost = cost + (guests * 30);
if (document.forms[0].member.value == 'yes') {
cost = cost - 25;}
document.forms[0].total.value = cost;
}
function testLength(field){
if(field.value.length == 0){
field.style.backgroundColor="yellow";
return false;
}else{
field.style.backgroundColor="white";
return true;
}
}
function testPattern(field, reg){
reg = /\d{3,4}/
if(reg.test (field.value) == false){
field.style.backgroundColor="yellow";
field.style.color="red";
return false;
}else{
field.style.backgroundColor="white";
field.style.color="black";
return true;
}
}
function submitForm(){
var valid;
if (testLength(document.forms[0].fname)==false){
valid = false;
}
if (testLength(document.forms[0].lname)==false){
valid = false;
}
if (testLength(document.forms[0].address)==false){
valid = false;
}
if (testLength(document.forms[0].email)==false){
valid = false;
}
if (testPattern(document.forms[0].phone1)==false){
valid = false;
}
if (testPattern(document.forms[0].phone2)==false){
valid = false;
}
if (testPattern(document.forms[0].phone3)==false){
valid = false;
}
if(document.forms[0].member.checked || document.forms[0].member.checked==false){
member.style.backgroundColor="yellow";
valid = false;
}
if(valid == false){
alert("Enter all required information in the appropriate format");
}else{
calcCost();
return valid;
}
}
Before you post, read our: 
