提交表單后，HTML / Javascript頁面正在重置

Question

我正在努力學習使用HTML和Javascript制作表單。 當我提交表單時，它會對其進行處理，並且可以看到結果，但是頁面會快速重置，以便表單返回到其初始狀態。 完成功能后，如何確保頁面不會重置？

這是表單的HTML和處理該表單的函數：

<form name="calculator" onsubmit="return calculate(this);">
            Enter the value of the house: $
            <input type="text" name="homeValue" id="homeValue" size="7" /><br>
            <select name="selMortgage" id="selMortgage">
                <option>Select a mortgage length</option>
                <option>15-year mortgage</option>
                <option>30-year mortgage</option>
            </select></br>
            <p class="form"><input type="checkbox" name="chkDiscount" value="discount"/>Good Credit Discount?</p>
            <input type="submit" value="Calculate" />
            <div id="result"></div>
</form>

function calculate(form) {
    var amountEntered = form.homeValue.value;
    var termLength;
    var interestRate;
    var calc;
    document.getElementById("result").innerHTML = "hi";
    if (!/^\d+(\.\d{1,2})?$/.test(amountEntered))
    {
        alert("You did not enter an amount of money");
        //form.homeValue.focus();
        return;
    }
    if (form.chkDiscount.checked == true)
    {
        interestRate = .05;
    }
    else
    {
        interestRate = .06;
    }
    if (form.selMortgage.selectedIndex == 0)
    {
        alert("Select a mortgage length");
    }
    else if (form.selMortgage.selectedIndex == 1)
    {
        termLength = 15;
    }
    else if (form.selMortgage.selectedIndex == 2)
    {
        termLength = 30;
    }
    calc = (Math.pow(1+interestRate,termLength) * amountEntered)/(termLength*12);
    document.getElementById("result").innerHTML = calc.toFixed(2);
}

Answer 1

好像您缺少return false.

Answer 2

由於您正在提交表單，因此由於重新加載頁面而導致值丟失。 您可以嘗試發布值，然后在表單元素上分配發布值，這樣，即使刷新后，您仍然可以看到提交的發布數據。

Answer 3

嘗試這個：

只需使用return false; 在您的javascript函數的末尾。

Answer 4

提交表單后，將調用JS函數calculate。 由於該函數不返回任何值，因此將假定未定義。 在JS中，未定義的內容將被假定為空，並且表單將被提交到服務器並再次重新加載。 這就是為什么您丟失數據的原因。 從您的代碼中，頁面僅執行一些JS代碼。 因此，我們可以防止提交表單以保留您的數據。 您可能需要在calculate函數中返回false，以防止提交。 示例如下：

document.getElementById（“ result”）。innerHTML = calc.toFixed（2）; 返回false；