Jquery Form output problem.

Jquery Form output problem.

I made a simple jquery mobile form in Android with three input text boxes and three output text boxes. Three inputs makes some calculations in JavaScript and outputs them in the three output boxes. The problem is that the three output boxes show the results for a brief second and becomes blank. This happens both in live view  in Dreamweaver CS 5.5 and in the installed apk on my mobile. But when viewed in IE there is no problem at all. As I'm new to this I'm not sure why this is happening. Need some immediate help to sort this out. Thanks.

HTML5 code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Pension Calculator</title>

<link rel="stylesheet" href="js1/jquery.mobile-1.0.1.min.css" type="text/css"/>
<script src="js1/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>


</head>

<section id="page1" data-role="page">
<header data-role="header">
<h1>Pension Calculator</h1>
<div data-role="content" data-theme="g">

  <form action="" method="post" id="theForm">
  <div data-role="fieldcontain">
   
   <label for="basic">Present Basic (Basic including Grade Pay + NPA)</label>
    <input type="number" name="basic" id="basic" value="0" autofocus required>
   </div>
   
   <div data-role="fieldcontain">
    <label for="years">Years of Service</label>
    <input type="number" name="years" id="years" value="0" required>
   </div>
   
   <div data-role="fieldcontain">
    <label for="da">Existing DA (%)</label>
    <input type="number" name="da" id="da" value="0" required>
   </div>
   
   <div data-role="fieldcontain">
    <label for="gratuity">Gratuity</label>
    <input type="number" name="gratuity" id="gratuity" disabled>
   </div>
   
   <div data-role="fieldcontain">
    <label for="pbasic">Basic Pension</label>
    <input type="text" name="pbasic" id="pbasic" disabled>
   </div>
   

   <div data-role="fieldcontain">
    <label for="total">Total Pension</label>
    <input type="number" name="total" id="total" disabled>
   </div>
   
   
   <div data-role="fieldcontain">
    <input type="submit" value="Calculate" id="submit">
   </div>
  </form>
        </div>
       
  <div data-role="footer" data-position="fixed" data-id="footnav" data-theme="a">
         <div data-role="navbar">
            <ul>
            <li><a href="index.html" class="ui-btn-active" ui-state-persist">Home</a></li> 
   <li><a href="help.html" class="ui-btn-active" "ui-state-persist">Help</a></li> 
   </ul>
   </div>
            </div>
            </div>
           
   <script src= "pension.js"></script>
           

</body>
</html>


JavaScript code:

function calculate() {

'use strict';

var total;

 var basic = document.getElementById('basic').value;
 //var basic1 = document.getElementById('basic1').value;
 var pbasic = document.getElementById('pbasic').value;
 var gratuity = document.getElementById('gratuity').value;
 //var pens = document.getElementById('pens').value;
 var da = document.getElementById('da').value;
 //var da1= document.getElementById('da1').value;
 //var days = document.getElementById('days').value;
 var years = document.getElementById('years').value;
 var total = document.getElementById('total').value;


gratuity = (parseInt(basic) + parseInt(da))*15/26 * years;

if
 (gratuity > 1000000)
 
 gratuity = 10000000;



 
pbasic = basic/2;

da = pbasic*da/100;

total = parseInt(pbasic) + parseInt(da)



/*basic1 = basic/2; 
pbasic = basic1;
pens = pbasic + pbasic*(da1/100);*/

//basic = basic.toFixed(2);
 
 
 gratuity = gratuity.toFixed(2);
 pbasic = pbasic.toFixed(2);
 total = total.toFixed(2);
 document.getElementById('gratuity').value = gratuity;
 document.getElementById('pbasic').value = pbasic;
 document.getElementById('total').value = total;
 return false; 
}
function init() {
 'use strict';
 document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;