return - Javascript code disappears after button click

Question

I'm trying to make a sub-total calculation tool, but I can't continue because I don't know what the problem is. When the form is submitted, or the button is clicked, everything quickly disappears.

Here's the fiddle :: http://jsfiddle.net/xFmBK/

I'm clueless...

    function calcSub(){

        var input = document.getElementById('fld'),
            subTotal = document.getElementById('sub-total'),
            tax = document.getElementById('tax'),
            total = document.getElementById('total');

        var subTotalCalc = input.value / 1.06;

        var flag = true;


        if(input.value == "" || input.value == null){
            alert("Please enter in a total!");
            return false;
        } else {
            subTotal.innerHTML = "Subtotal:" + " " + "$" + subTotalCalc;
            tax.innerHTML = "Tax:" + " " + "$" + input.value - subTotalCalc;
            total.innerHTML = input.value;
            return flag;
        }

    }

Answer 1

That happens because your submit button actually does a form submit on some action and page is being refreshed. There are some ways to fix behavior, such as:

make your submit button just a button: <input type="button"> actually doesn't seem you need a form there

or add return false to onClick handler:

<button type="submit" onclick="calcSub(); return false;">Calculate</button><br>