表格提交后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重置

回答

相关问题