![](/img/trans.png)
[英]The page is getting reset on submitting form after a while in HTML, javascript
[英]HTML/Javascript Page is resetting after submitting form
我正在努力学习使用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);
}
好像您缺少return false.
由于您正在提交表单,因此由于重新加载页面而导致值丢失。 您可以尝试发布值,然后在表单元素上分配发布值,这样,即使刷新后,您仍然可以看到提交的发布数据。
尝试这个:
只需使用return false;
在您的javascript函数的末尾。
提交表单后,将调用JS函数calculate。 由于该函数不返回任何值,因此将假定未定义。 在JS中,未定义的内容将被假定为空,并且表单将被提交到服务器并再次重新加载。 这就是为什么您丢失数据的原因。 从您的代码中,页面仅执行一些JS代码。 因此,我们可以防止提交表单以保留您的数据。 您可能需要在calculate函数中返回false,以防止提交。 示例如下:
document.getElementById(“ result”)。innerHTML = calc.toFixed(2); 返回false;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.