javascript - Values Disappearing in Form

Question

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.

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.

Answer 1

You have bound your submit button a click listener. Therefore when you click the button the function runs, but the form is also submitted.

What you should do is to bind that function to form submit, like this;

<form ... onsubmit="calculateRevenue(this)">

And in that function, you should return false to prevent the form from being submitted.

if (form.ratechange.value == '')
{
     alert('Please enter a value for the Change in Rate field. ');
     return false;
}