HTML/Javascript提交表格後重置頁面

我正在學習使用HTML和Javascript進行表單製作。當我提交我的表單時，它會處理它，並且我可以看到結果，但頁面可以快速重置，以便表單返回到其開始狀態。如何確保功能完成後頁面不會重置？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); 
}

來源

2012-12-14 Erik Hanson

它看起來像你缺少一個return false.

來源

2012-12-14 04:54:09

完美，謝謝你！ –

由於您提交的值，由於頁面重載失去形式。您可以嘗試POST您的值，然後分配您的表單元素上的發佈值，以便即使刷新後仍然能夠看到提交的POST數據。

來源

2012-12-14 04:46:49 Vainglory07

當表單提交時，JS函數計算將被調用。由於該函數沒有返回任何值，因此將假定爲undefined。而在JS中，undefined將被假定爲什麼都沒有，表單將被提交給服務器並重新加載。這就是你失去你的數據的原因。從你的代碼中，頁面只是執行一些JS代碼。所以我們可以防止提交表單來保存您的數據。您可能需要在計算函數中返回false以防止提交。示例如下：

document.getElementById（「result」）。innerHTML = calc.toFixed（2）; 返回false;

來源

2012-12-14 04:50:36

試試這個：

在您的JavaScript函數結束只需使用return false;。

來源

2012-12-14 04:52:40

HTML/Javascript提交表格後重置頁面

回答

相關問題