...

View Full Version : calcCost function not displaying correct amount



johnmac81
05-30-2012, 03:05 AM
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


<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



<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




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;
}

}

Old Pedant
05-30-2012, 03:26 AM
You can't get the value from a group of radio buttons by just using name.value.

You have to write a function to determine which one of the group is checked and then returns its value (or, presumably, return null if none or checked).

But for your simply yes/no radio buttons, you could do this:


function calcCost()
{
var form = document.forms[0];
var cost =145;
var guests = Number( form.guests.value );
if ( isNaN(guests) )
{
cost = "Form is incomplete";
} else {
cost = cost + (guests * 30);
if ( form.member[0].checked ) cost -= 25;
}
form.total.value = cost;
}

Old Pedant
05-30-2012, 03:33 AM
As for the other problem: You aren't returning false from the onsubmit function when valid is false.

An easy fix: End the function thus:


if(valid == false){
alert("Enter all required information in the appropriate format");
}else{
calcCost();
}
return valid;

In other words, ALWAYS return the value of valid.

I have to say I don't think your form checking is very thorough. As it sits, the user can enter a single space into each form field and you will accept it.

Oh....and this is wrong:


if(document.forms[0].member.checked || document.forms[0].member.checked==false){
member.style.backgroundColor="yellow";
valid = false;
}

It needs to be


if( ! document.forms[0].member[0].checked && ! document.forms[0].member[1].checked){
member.style.backgroundColor="yellow";
valid = false;
} else {
member.style.backgroundColor="white";
}


You know, form validation is probably the one most discussed issue in this forum. You would do well to search for some posts on how to do effective validation, which yours simply is not.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum