1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:23 am May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

How do you stop onClick from refreshing page

Made a custom calculator, which works, but page refreshes immediatelhy

         

surfnewmedia

12:35 am on Jan 25, 2013 (gmt 0)

10+ Year Member



I made a custom calculator, but when the submit button is clicked it refreshes the page so you cannot see the answer. How do you stop that from happening? Any help would be appreciated (and I am new to all of this) Here is the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function cubeVolume(form)
{
var side = form.s.value;

if(isNaN(side))
{
alert("Not a Number");
document.getElementById("s").value = "";
return false;
}

var volume = Math.pow(side,3)
var volumeOut = roundTo4(volume)

document.getElementById("cv").value = volumeOut;
}

function boxVolume(form)
{
var h = form.h.value;
if(isNaN(h))
{
alert("Not a Number");
document.getElementById("h").value = "";
return false;
}

var w = form.w.value;
if(isNaN(w))
{
alert("Not a Number");
document.getElementById("w").value = "";
return false;
}

var l = form.l.value;
if(isNaN(l))
{
alert("Not a Number");
document.getElementById("l").value = "";
return false;
}

var volume = (h * w * l) / 231;
var volumeOut = roundTo4(volume)
document.getElementById("bv").value = volumeOut;
}

function roundTo4(raw)
{
strFloat = raw.toString();
var newFloat;

if(strFloat.indexOf(".") > 0 && strFloat.length - strFloat.indexOf(".") > 0)
{
strFloat = strFloat.substring(0,strFloat.indexOf(".") + 6);

var numFloat = parseFloat(strFloat);
var rndFloat = Math.round(numFloat * 10000);
var temp1Float = rndFloat / 10000;
var temp2Float = temp1Float.toString();

newFloat = temp2Float.substring(0,temp2Float.indexOf(".") + 0);
}
else
{
newFloat = strFloat;
}
return newFloat;
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
}
.answer {
font-size:22px; font-weight:bold; font-size:200%; height: 22px;
}
</style>
</head>
<body>



<form>
<table border="0" align="center" cellpadding="5" cellspacing="5" style="font-family:verdana; font-size:12px; border-style:solid; border-color:black; border-width:1px;">
<tr><td width="130">Height:</td><td width="170"><input id="h" style="text-align:right"></input></td>
<td width="110">Inches</td></tr>
<tr><td>Width:</td><td><input id="w" style="text-align:right"></input></td>
<td>Inches</td></tr>
<tr><td>Length:</td><td><input id="l" style="text-align:right"></input></td>
<td>Inches</td></tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><button onClick="boxVolume(this.form)">Calculate Tank Size</button>
<input type="reset" name="Reset" id="button" value="Reset"></td>
</tr>
<tr>
<td><h2><strong><br>
Tank Size:</strong></h2></td>
<td><strong>
<div class="answer">
<input type="text" id="bv" style="text-align:center; font-size:22px; font-weight:bold; value=" size="10" maxlength="10">
</div></strong></td>
<td><h2><strong><br>
Gallons</strong></h2></td></tr>
</table>
</form>

</body>
</html>

outrun

12:59 am on Jan 25, 2013 (gmt 0)

10+ Year Member



Try button onClick="boxVolume(this.form);return false;"

surfnewmedia

1:13 am on Jan 25, 2013 (gmt 0)

10+ Year Member



Thank you. It partially works ....

In Firefox it works perfectly. In Safari (and I am told Internet Explorer), it doesn't. As soon as the button is clicked the page refreshes and the values are all empty.

Fotiman

4:32 am on Jan 25, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld!

Remove the return false. You might put that on the form onsubmit handler, but it's not going to help on the button element (and even putting it on the form onsubmit handler is not ideal). Instead, change your <button> element to <input type="button">. Then it won't try to submit the form.


A few suggestions:

1. Use an HTML5 doctype. It's backwards compatible with HTML 4.01, but shorter:
<!DOCTYPE html>

2. Put scripts at the end of your document, just before the closing </body> tag. Preferably, put them in external .js files. It's better for performance, reusability, and maintenance.

3. In your functions, put all your variable declarations at the very beginning of the function. Don't do this: 

var somevariable = somevalue;
// do some things
// ...
var anothervariable = anothervalue;

Instead do this: 

var somevariable = somevalue,
  anothervariable;
// do some things
// ...
anothervariable = anothervalue;

Keeping your variable declarations at the top of the function keeps your code neater. You don't have to search all over to determine if a variable is global or if it has function scope.

3. some of your functions take a form object, but then use document.getElementById to reference specific elements in the page, including elements that you access via the form object passed in. It's a bit inconsistent, and fragile if any of the page changes. You might consider making it a little more abstract.

4. There's a lot of similar looking code that could probably be rewritten as a reusable function

5. charset meta data should be the first thing in the <head>

6. Don't use inline style attributes.

7. Don't use presentational attributes (border, align, width, etc.)

8. Don't use tables for layout.

I could probably go on, but it's not what you asked. :)
Hope this helps.

surfnewmedia

6:20 pm on Jan 25, 2013 (gmt 0)

10+ Year Member



Thank you so much! That did the trick. I am also changing the other items you had listed. I really appreciate you taking the time to give it a look and offering a solution!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:23 am May 21, 2026