How would you guys avoid refreshing the page after JavaScript code is excuted.

Dev Shed Forums Sponsor:

December 8th, 2012, 10:29 PM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 53

Time spent in forums: 10 h 3 m 27 sec
Reputation Power: 1

How would you guys avoid refreshing the page after JavaScript code is excuted.

Okay I have this code for a price calculator down below.

Every time I click each price, the prices add up to the total amount and it's okay.

However, when I have list of so many product that users would have to scroll down the page, they would be sent back to the top of the page after clicking "Add $xx" and I don't like this. Users may get tired of going back down and up while adding up products' prices. I want the user to stay at the same place after clicking "Add $xx" .

So does anyone know how to solve this problem?
Actually, why does this happen in the first place??

Code:


<script>
function total(amount)
{
var total = document.getElementById("total_storage").value;
total = parseInt(total) + parseInt(amount);
document.getElementById("total_storage").value="";
document.getElementById("total_storage").value = total;
document.getElementById("total_display").innerHTML = total;
}
function resetAll()
{
document.getElementById("total_storage").value = "0";
document.getElementById("total_display").innerHTML="0";
}
</script>

Total Price: $ <span id="total_display">0</span> || <a href="#" onclick="resetAll();return false">Clear Cart</a>

<br/>
<br/>

<input type="button" value="Add $10" onclick="total('10')"/>

<input type="button" value="Add $25" onclick="total('25')"/>

<input type="button" value="Add $100" onclick="total('100')"/>

<input type="button" value="Add $10" onclick="total('10')"/>

<input type="button" value="Add $25" onclick="total('25')"/>

<input type="button" value="Add $100" onclick="total('100')"/>

<input type="button" value="Add $10" onclick="total('10')"/>

<input type="button" value="Add $25" onclick="total('25')"/>

<input type="button" value="Add $100" onclick="total('100')"/>

<input type="button" value="Add $10" onclick="total('10')"/>

<input type="button" value="Add $25" onclick="total('25')"/>

<input type="button" value="Add $100" onclick="total('100')"/>

<input type="button" value="Add $10" onclick="total('10')"/>

<input type="button" value="Add $25" onclick="total('25')"/>

<input type="button" value="Add $100" onclick="total('100')"/>

<input id="total_storage" type="hidden" value="0"/>

December 9th, 2012, 09:57 AM

MrFujin

Lord of the Dance

Join Date: Oct 2003

Posts: 3,129

Time spent in forums: 2 Months 2 Weeks 21 h 52 m 18 sec
Reputation Power: 1736

I tried your code with several lines, i.e. <br>, between each input and didn't got the browser to move the page back to the top.
I have tested in FF12 and IE9

December 9th, 2012, 02:33 PM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 22 h 56 m
Reputation Power: 164

It is hard to tell without more of your code, but I guess clicking a button is causing a form submission. Try adding return false; just before the end of your total() function.

But you also create a variable called total - the same as your function name: don't do this!

December 9th, 2012, 03:46 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 2 m 4 sec
Reputation Power: 4192

Quote:

Originally Posted by AndrewSW

But you also create a variable called total - the same as your function name: don't do this!

It could cause significant confusion, but they're in different scopes, so is it really that bad?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

December 9th, 2012, 04:39 PM