Values Disappearing in Form

Well, the below snippet contains the text fields that I am filling in, whose values are used later in the JavaScript function.These are contained in a form.

   <br/>
    <br/>
    <label for="rchange">Change in Rate : </label>
    <input type="text" id="rchange" name="ratechange" />
 
 
    //same as above for Change in Capacity, but with name=capachange
 
   <br/>
   <br/>
   <label for="rev">Annual Revenue : </label>
   <input type="text" id="rev" readonly />
 
       <input type="submit" name="sub" value="Submit Form"    onClick="calculateRevenue(this.form)" />
 

JavaScript function that calculates some value and places it in the text field called rev.

     function calculateRevenue(form) 
    { 
       if (form.capachange.value == '')
      {
       alert('Please enter a value for the Change in Capacity field.');
 
 
    }
      if (form.ratechange.value == '')
     {
      alert('Please enter a value for the Change in Rate field. ');
 
 
       } 
 
           else
 
            {
 
            form.rev.value=parseInt(form.capachange.value)+parseInt(form.ratechange.value);
          }
 
           } 
 
            </script> 
 

The problem is when I submit the form, I get the correct value and then the contents of the fields filled in vanish after around 2 seconds. The same thing happen if I don't fill in the change in rate or change in capacity field, it gives the alert and then the value disappears. Any idea whats happening here? Im not even using 'refresh' anywhere. Thank you for your time.

---