PDA

View Full Version : JS option value calculation / validation



stroodle01
Mar 15th, 2007, 09:57 PM
Hi there!

I am trying to produce a suitable car insurance website for a friend which takes various details of the vehicle, the owner the the owners driving history. The website includes a page which requests the number of points the user has recieved in the last 3 years. The 'points' page contains four drop-down selection boxes with the maximum of 11 points each to choose from, along with the date and description of the offence.

I have been trying for ages to produce an alert message on my page, which is displayed depending on the total value of the four drop down selection boxes. I want the javascript to calculate the value of each option box, then if the value is over 9, i want an alert to be displayed; without the information being processed to the subsequent php page.

I had come up with the idea of declaring the variable TotalPoints which is equal to the value of each drop-down box, then in the script, simply creating an if statement under the condition that TotalPoints is over 9, display a validation 'alert'.


I have included the current code below



<?php
session_start();
$_SESSION['model'] = $_POST['dhtmlgoodies_city'];
$_SESSION['make'] = $_POST['dhtmlgoodies_country'];
$_SESSION['enginesize'] = $_POST['enginesize'];
?>

<!doctype_html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Smart Car Insurance - Points</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="car.css" rel="stylesheet" type="text/css" />

<script>
<!--


:confused:
function check_form(f) { // f is the form (passed using the this keyword)

var TotalPoints = Points1.value + Points2.value + Points3.value + Points4.value;

if(f.TotalPoints.value > 9){
alert("Too many points!");
f.TotalPoints.focus(); // put the prompt in the name field
// if the browser is Netscape 6 or IE
if(document.all || document.getElementByID){
// change the color of text field
f.Points1.style.background = "yellow";
}
// make sure the form is not submitted
return false;
}


}
// -->
</script>


</head>
<body>

<div id="header">
<h1>SmartCarInsurance</h1>

</div>
<div id="menu">
<ul>
<li class="first"><a href="Home.html">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="columnA">
<h2>Current points</h2>
<p>Independent research (Consumer Intelligence Oct-Dec 2006) shows 1 in every 10 people save as much as £140 by switching to Churchill car insurance.
We review our rates and cover every week so you can enjoy excellent value. Read on to find out some of the ways we'll look after you as a Churchill car insurance customer</p>

<fieldset>
<legend>Your current car details</legend>
<p>The make of your car is <?php echo "<b>". $_SESSION['make']."</b>"; ?><br /></p>
<p>The model of your car is <?php echo "<b>". $_SESSION['model']."</b>"; ?> <br /></p>
<p>The engine size of your car is <?php echo "<b>". $_SESSION['enginesize']."</b>"; ?><br /></p>
<p class="submit">
<input type="button" onClick="javascript: history.go(-1)" value="Edit details">
</p>
</fieldset>
<p>
<fieldset>

<legend>Your current points</legend>


<form name="frmPoints" id="frmPoints" method="post" action="Accidents.php" onSubmit="return check_form(this)">
<br>
<p>
<label for="Points1">First offence:</label>
<select name="Points1" id="select1">
<option value="0">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
Date issued:
<input name="Date1" type="text" id="Date1" />
<p>
<label for="Points2">Second offence:</label>
<select name="Points2" id="select2">
<option value="0">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>

Date issued:
<input name="Date2" type="text" id="Date22" />
<p>
<label for="Points3">Third offence:</label>
<select name="Points3" id="select3">
<option value="0">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
Date Issued:
<input name="Date3" type="text" id="Date3" />
<p>
<label for="Points4">Fourth offence:</label>
<select name="Points4" id="select4">
<option value="0">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
Date issued:
<input name="Date4" type="text" id="Date4" />
<br>

<br>
<p class="submit">
<input type="submit" value="Submit" name="submit">

<input type="reset" value="Start again"></p>


</form>
<p class="submit"></p>


</fieldset results>





</p>
<ul>
<li><a href="#">.</a></li>
<li><a href="#">.</a></li>
<li><a href="#">.</a></li>
<li><a href="#">.</a></li>
<li><a href="#">.</a></li>
</ul>
<p>.</p>
</div>
<div id="columnB">
<h2>Recent Updates</h2>
<p><strong>[06/09/2006]</strong> . <a href="#">More…</a></p>
<p><strong>[06/06/2006]</strong> . <a href="#">More…</a></p>
<p><strong>[06/03/2006]</strong>. <a href="#">More…</a></p>
<h2>What you get</h2>
<ul>
<li>24 hour accident recovery</li>
<li>24 hour free claim line (08oo 123 4567)</li>
<li>No need to pay extra if you take a trip to the EU</li>
<li>Cover for personal belongings in the car</li>
<li>New for old cover on cars under 12 months old</li>
</ul>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">

</div>

<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
</div>
</body>
</html>


I would be gratefull if someone could help me find a solution to this problem.

glenngv
Mar 15th, 2007, 10:08 PM
Form element values are strings. Convert them to number to perform addition.

function check_form(f) { // f is the form (passed using the this keyword)
var TotalPoints = Number(f.Points1.value) + Number(f.Points2.value) + Number(f.Points3.value) + Number(f.Points4.value);
alert(TotalPoints);
if(TotalPoints > 9){
alert("Too many points!");
f.Points1.style.backgroundColor = "yellow";

// make sure the form is not submitted
return false;
}
return true;
}

stroodle01
Mar 16th, 2007, 01:03 AM
Thank you very much for responding to my thread and above all, supplying me with a comprehendable solution to this problem. Your know-how has proved to eliminate the problem at hand, and has allowed me to proceed with my work.:thumbsup: