homepage Welcome to WebmasterWorld Guest from 54.205.105.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How do you stop onClick from refreshing page
Made a custom calculator, which works, but page refreshes immediatelhy
surfnewmedia



 
Msg#: 4539110 posted 12:35 am on Jan 25, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4539110 posted 12:59 am on Jan 25, 2013 (gmt 0)

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

surfnewmedia



 
Msg#: 4539110 posted 1:13 am on Jan 25, 2013 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4539110 posted 4:32 am on Jan 25, 2013 (gmt 0)

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



 
Msg#: 4539110 posted 6:20 pm on Jan 25, 2013 (gmt 0)

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved