Question

我的表格定义如下：

<form id="form" onsubmit="validate()">

我处理信息，然后按如下方式修改HTML正文：

var toRemove = document.getElementById("formContainer");
toRemove.parentNode.removeChild(toRemove);
document.getElementById("main").childNodes[1].innerHTML = text1;
document.getElementById("main").childNodes[3].innerHTML = text2;

这可能会显示一个毫秒，但页面会重置为空白表格。我可以通过之后添加警报来解决此问题，但是一旦我解除警报，页面就会重置。有没有办法阻止它重置？

以下是完整代码：

HTML - http://puu.sh/p7HIl/e1abcc7920.html JavaScript - http://puu.sh/p7HJ3/54850f8588.js

这里还有一个实时版本 - http://139.62.210.151/~n00876544/assign2/index.html?firstName=Cameron&lastName=Bixby&age=21-30&email=Other&baduk=yes

Answer 1

我假设js片段写在validate函数

中

如果是这样，你可以使用event.preventDefault()函数阻止默认行为。

function validate(event){
  event.preventDefault();
  //Rest of the code
}

注意：这将停止提交表单。但您可以使用ajax发送表单数据

Answer 2

阻止表单提交的经典方法是从事件处理程序返回false，如

<form id="form" onsubmit="validate(); return false;">

或者如果验证函数返回false以阻止提交，则为

<form id="form" onsubmit="return validate();">

您还可以通过调用事件对象上的preventDefault来阻止默认操作。事件对象作为第一个参数传递给事件处理函数，或者在旧版IE中设置为窗口属性。在任何一种情况下你可以立即阻止默认，

<form id="form" onsubmit="event.preventDefault(); validate();">

或将其传递给验证例程，其中可以有条件地调用preventDefault。

<form id="form" onsubmit="validate(event)">

请注意，HTMLelement.addEventListener功能提供了将javascript事件处理程序编写为HTML属性值的替代方法，并且具有最小化尝试设置相同的多个脚本之间的冲突的优点。的onEvent＆＃34;同一HTML元素上的HTML元素属性。

如何在JS和HTML中停止表单自动重置？

2 个答案: