表格提交後HTML重置

今天我開始學習JavaScript，我想使用JavaScript計算文本字段中的兩個數字。我想在網站上以HTML格式顯示結果。當我使用表單提交值時，它會不斷重置我的修改後的HTML（結果部分顯示實際結果一秒鐘但保持切換回默認值）。表格提交後HTML重置

使用按鈕時不會發生這種情況。但因爲我想添加單選按鈕來從數學運算中選擇，我更喜歡一個表單（我也不太清楚如何確定通過JS檢查哪個單選按鈕）。

這是我的HTML表格

<form name="calcForm" onsubmit="calc(num1.value, num2.value)"> 
    <input type="text" id="num1"> 
    <input type="text" id="num2"> 
    <input type="submit" value="submit"> 
</form>

這是我的決心，部分

<div id="calcRes" style="display:block;">Lorem ipsum dolor sit amet</div>

實際的JavaScript函數

function calc(num1, num2) { 
    var res = Number(num1)+Number(num2); 
    document.getElementById('calcRes').innerHTML = "Result is " + res; 
}

由於（使用表格時重置）我上面說過，當使用按鈕而不是'表'時顯示結果

<button onclick="calc(num1.value, num2.value)">Calculate</button>

我想知道爲什麼修改後的HTML切換回默認值，解決方案如何避免這種情況，如果在我的代碼中有任何「不良做法」。我也試圖尋找這個問題，但我找不到任何東西。我想，這只是一個不好的問題，但正如我所說，我是一個完整的初學者，所以請耐心等待我。

來源

2016-11-25 Max

表單正在提交，因此頁面正在重新加載。爲了避免這種情況，你需要防止表單提交。在你的情況下，

<form name="calcForm" onsubmit="calc(num1.value, num2.value); return false;">

應該做的伎倆。

來源

2016-11-25 23:58:50 Moob

只是打我給它的更多信息;我也想提及'num1' /'num2' *應該被定義爲更好的瀏覽器兼容性。 –

非常感謝！因爲我正在使用本地文件，所以我沒有注意到重新加載。 :) – Max

-1

你可以簡單地擠在線路

document.getElementById("calcForm").reset();

行

document.getElementById('calcRes').innerHTML = "Result is " + res;

後，但你必須在id="calcForm"添加到您的<form>標籤。

提交行動是要理解爲簡單地結束所有的用戶輸入和做一些事情。之後，您不再需要輸入，因此會自動刪除。通過點擊按鈕，表單不知道你實際上已經完成了你的輸入。它只是一個按鈕點擊。所以它會保持原樣輸入。

來源

2016-11-25 23:42:23 Berger

這不起作用，也不會回答什麼用戶試圖問 – ThisIzKp

<form> onsubmit默認功能是將表單信息提交給服務器，並點擊submit按鈕重置頁面。

在上面的代碼中，點擊form提交時，函數calc被調用，但它也在函數調用後重置頁面，這就是爲什麼修改的HTML切換回默認值。

使用event.preventDefault()可以防止該默認行爲，如果它是可取消的，則取消該事件。將此行添加到開始calc函數將防止默認行爲。

Refer to MDN Docs約event.preventDefault()

來源

2016-11-26 00:06:42 ThisIzKp

表格提交後HTML重置

回答

相關問題