unwanted auto-refresh

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

I'm running a JavaScript function with numbers submitted into 3 text fields to calculate the answer. The function is ran when the button is pressed after the three numbers are input.
This is the function. The algorithm works correctly. The math, everything works out right. But, after it's done the page automatically refreshes for some reason. Not sure why. Someone suggested putting "return false;" at the end of the function, but that did not work.
Code: [ Select ]
function calculate()
{
a = document.getElementById('amount').value;
y = document.getElementById('price').value;
b = document.getElementById('since').value;

z=[((a/25)*7)*y] * (b/7);
getChange = Math.round(z*100)/100;
result = document.getElementById('answer');
/*input answer*/
result.innerHTML = getChange;
}
  1. function calculate()
  2. {
  3. a = document.getElementById('amount').value;
  4. y = document.getElementById('price').value;
  5. b = document.getElementById('since').value;
  6. z=[((a/25)*7)*y] * (b/7);
  7. getChange = Math.round(z*100)/100;
  8. result = document.getElementById('answer');
  9. /*input answer*/
  10. result.innerHTML = getChange;
  11. }


This is the html code. The JS file is in <script src="">

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="calculator.css">
<script src="calcs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Robert Cathey">

</head>

<body>
<form>
<div>
<form id="firstCalculator">
Cigs Per Day<input id="amount" type="text" name="inputCigs">
How Many Days<input id="since" type="text" name="inputDays">
Price per pack<input id="price" type="text" name="inputPrice">
<input type="submit" onclick="calculate();" value="Submit">
</form>
</div>
<h1 id="answer"></h1>

</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" type="text/css" href="calculator.css">
  6. <script src="calcs.js"></script>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <meta name="author" content="Robert Cathey">
  9. </head>
  10. <body>
  11. <form>
  12. <div>
  13. <form id="firstCalculator">
  14. Cigs Per Day<input id="amount" type="text" name="inputCigs">
  15. How Many Days<input id="since" type="text" name="inputDays">
  16. Price per pack<input id="price" type="text" name="inputPrice">
  17. <input type="submit" onclick="calculate();" value="Submit">
  18. </form>
  19. </div>
  20. <h1 id="answer"></h1>
  21. </body>
  22. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

one you have a form in a form.

Second you are submitting the form which will basically do a refresh.

third im on my phone but ill try to make this work

Option 1

Javascript
JAVASCRIPT Code: [ Select ]
    function calculate()
    {
    a = document.getElementById('amount').value;
    y = document.getElementById('price').value;
    b = document.getElementById('since').value;
    z=[((a/25)*7)*y] * (b/7);
    getChange = Math.round(z*100)/100;
    result = document.getElementById('answer');
    /*input answer*/
    result.innerHTML = getChange;
 
    // Add this to keep form from submitting
    return false;
 
    }
 
 
  1.     function calculate()
  2.     {
  3.     a = document.getElementById('amount').value;
  4.     y = document.getElementById('price').value;
  5.     b = document.getElementById('since').value;
  6.     z=[((a/25)*7)*y] * (b/7);
  7.     getChange = Math.round(z*100)/100;
  8.     result = document.getElementById('answer');
  9.     /*input answer*/
  10.     result.innerHTML = getChange;
  11.  
  12.     // Add this to keep form from submitting
  13.     return false;
  14.  
  15.     }
  16.  
  17.  


HTML
HTML Code: [ Select ]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
    <script src="calcs.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="Robert Cathey">
    </head>
    <body>
    <div>
 
    <!-- Added onSubmit="return calculate();" -->
    <form id="firstCalculator" onSubmit="return calculate();">
 
    Cigs Per Day<input id="amount" type="text" name="inputCigs">
    How Many Days<input id="since" type="text" name="inputDays">
    Price per pack<input id="price" type="text" name="inputPrice">
   
    <!-- Changed this <input type="submit" onclick="calculate();" value="Submit">  -->
    <input type="submit" value="Submit">
    </form>
    </div>
    <h1 id="answer"></h1>
    </body>
    </html>
 
  1.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.     <html>
  3.     <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="calculator.css">
  6.     <script src="calcs.js"></script>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8.     <meta name="author" content="Robert Cathey">
  9.     </head>
  10.     <body>
  11.     <div>
  12.  
  13.     <!-- Added onSubmit="return calculate();" -->
  14.     <form id="firstCalculator" onSubmit="return calculate();">
  15.  
  16.     Cigs Per Day<input id="amount" type="text" name="inputCigs">
  17.     How Many Days<input id="since" type="text" name="inputDays">
  18.     Price per pack<input id="price" type="text" name="inputPrice">
  19.    
  20.     <!-- Changed this <input type="submit" onclick="calculate();" value="Submit">  -->
  21.     <input type="submit" value="Submit">
  22.     </form>
  23.     </div>
  24.     <h1 id="answer"></h1>
  25.     </body>
  26.     </html>
  27.  


Option 2


Javascript
JAVASCRIPT Code: [ Select ]
    function calculate()
    {
    a = document.getElementById('amount').value;
    y = document.getElementById('price').value;
    b = document.getElementById('since').value;
    z=[((a/25)*7)*y] * (b/7);
    getChange = Math.round(z*100)/100;
    result = document.getElementById('answer');
    /*input answer*/
    result.innerHTML = getChange;
    }
 
 
  1.     function calculate()
  2.     {
  3.     a = document.getElementById('amount').value;
  4.     y = document.getElementById('price').value;
  5.     b = document.getElementById('since').value;
  6.     z=[((a/25)*7)*y] * (b/7);
  7.     getChange = Math.round(z*100)/100;
  8.     result = document.getElementById('answer');
  9.     /*input answer*/
  10.     result.innerHTML = getChange;
  11.     }
  12.  
  13.  


HTML
HTML Code: [ Select ]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
    <script src="calcs.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="Robert Cathey">
    </head>
    <body>
    <div>
 
    <!-- Removed the form tag -->
 
    Cigs Per Day<input id="amount" type="text" name="inputCigs">
    How Many Days<input id="since" type="text" name="inputDays">
    Price per pack<input id="price" type="text" name="inputPrice">
   
    <!-- Changed this to just a button-->
    <input type="button" onclick="calculate();" value="Submit">
    </div>
    <h1 id="answer"></h1>
    </body>
    </html>
 
  1.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.     <html>
  3.     <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="calculator.css">
  6.     <script src="calcs.js"></script>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8.     <meta name="author" content="Robert Cathey">
  9.     </head>
  10.     <body>
  11.     <div>
  12.  
  13.     <!-- Removed the form tag -->
  14.  
  15.     Cigs Per Day<input id="amount" type="text" name="inputCigs">
  16.     How Many Days<input id="since" type="text" name="inputDays">
  17.     Price per pack<input id="price" type="text" name="inputPrice">
  18.    
  19.     <!-- Changed this to just a button-->
  20.     <input type="button" onclick="calculate();" value="Submit">
  21.     </div>
  22.     <h1 id="answer"></h1>
  23.     </body>
  24.     </html>
  25.  


These are done quick and on my phone if they don't work let me know ill fix them when im on my computer. the concepts are here so even if they don't work you might be able to figure it out
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Just removing the form tag made it work. I'm surprised I didn't notice that <form> within <form> when I was debugging. I set it once, then accidentally set it again, when I gave it an id. But no <form> at all fixed it. I didn't know that would cause the refresh Thank you very much.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 92 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.