Forum Moderators: open
I'm having trouble doing a javascript function and form to calculate (sum) the total of a number of values which are taken from the form.
Could anyone help? All that happens is that the page refreshes (resetting the form).
Here is the code:
<html>
<head>
<title>Rae Design - cheap and easy graphic and web design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--
function calculatePayment() {
domaincost = document.form.domain.value
hostingcost = document.form.hosting.value
constructioncost = document.form.construction.value
photographycost = document.form.photography.value
domaincost = Number(domaincost)
hostingcost = Number(hostingcost)
constructioncost = Number(constructioncost)
photographycost = Number(photographycost)
totalcost = domaincost+hostingcost+constructioncost+totalcost
document.form.textfield.value=totalcost
}
//-->
</SCRIPT>
<h1 align="justify"><strong>Initial setup cost calculator</strong></h1>
<form action="" method="post" name="form" id="form">
<span class="bodytext">
<label><strong>Domain Type</strong> </label>
</span>
<table width="200">
<tr>
<td class="bodytext">
<label>
<input name="domain" type="radio" value="0" checked>
.co.uk - free with hosting</label>
</td>
</tr>
<tr>
<td class="bodytext">
<label>
<input type="radio" name="domain" value="10">
.com or other - £10 per year</label>
</td>
</tr>
</table>
<span class="bodytext">
<label for="label"></label>
</span>
<p class="bodytext"><strong>Hosting</strong></p>
<table width="311">
<tr>
<td width="303" class="bodytext">
<label>
<input name="hosting" type="radio" value="65" checked>
One year hosting package - £65 per year</label>
</td>
</tr>
<tr>
<td class="bodytext">
<label>
<input type="radio" name="hosting" value="120">
Two year Hosting package - £120 per year</label>
</td>
</tr>
</table>
<p class="bodytext"><strong>Construction</strong></p>
<p class="bodytext">How many web pages do you require?</p>
<p>
<span class="bodytext">
<label for="select"></label>
<strong>
<select name="construction" id="construction">
<option selected value=150>1</option>
<option value=185>2</option>
<option value=220>3</option>
<option value=255>4</option>
<option value=290>5</option>
<option value=325>6</option>
<option value=360>7</option>
<option value=295>8</option>
<option value=430>9</option>
<option value=465>10</option>
</select>
</strong></span></p>
<p class="bodytext"><strong>Do you require photography? </strong></p>
<table width="200">
<tr>
<td class="bodytext">
<label>
<input type="radio" name="photography" value="25">
Yes</label>
</td>
</tr>
<tr>
<td class="bodytext">
<label>
<input name="photography" type="radio" value="0" checked>
No</label>
</td>
</tr>
</table>
<p>
<span class="bodytext">
<label for="Submit"></label>
<input name="Submit" type="submit" id="Submit" onClick=calculatePayment() value="Calculate">
</span></p>
<p class="bodytext"><strong>Approximate cost </strong></p>
<p>
<span class="bodytext">
<label for="textfield"></label>
£
<input name="textfield" type="text" id="textfield" size="10" readonly="true">
</span></p>
<p> </p>
</form>
<p align="justify"> </p>
<p align="justify"> </p>
<h1 align="justify"> </h1> </td>
</body>
</html>
the form is submitting when you click the button there isn't an action so it submits back to itself.
you could also remove the onclick event of the submit button. you would need to move the event to the form <form action... onsubmit="return calculatePayment();"
you would then need to add the line:
return false;
to the end of your calculatePayment function to get the function to not submit.
Leave it as a submit button for accessibility and add return false to the form tag:
<form action="" method="post" name="form" id="form" onSubmit="return false;">
....
The result will be javascript-disabled browsers will still be able to submit the form because it will ignore return false. You will STILL have to recalculate on the server side, which you should be doing anyway (for this very reason.)
Oh and welcome aboard! :-)
