#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    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"/>
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,540
    Rep Power
    1906
    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
  4. #3
  5. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    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!
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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.

    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).
  8. #5
  9. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Originally Posted by Kravvitz
    It could cause significant confusion, but they're in different scopes, so is it really that bad?
    Revise that to "..I wouldn't do this"

IMN logo majestic logo threadwatch logo seochat tools logo