Question

基本上它在锡上说的是什么。我有一个生成JavaScript操作的表单：

// in head
function process() {
    setupform = document.getElementById("setup");
    setupform.parentNode.removeChild(setupform);
    // do other stuff
}

// in body
<form id="setup" name="setup">
    <input id="entrybox" name="entry" type="text">
    <button type="submit" onclick="process()">Process</button>
</form>

当表单被触发时，页面会重新加载，而不是继续使用＆＃34;其他内容＆＃34;并将表格留空。错误控制台中不会显示错误。

我有另一个版本，而不是从DOM中删除表单，它只有setupform.innerHTML = "";，它工作正常。但是，留下一个空元素似乎是错误的。我只想弄清楚为什么上面的代码不会起作用。

在任何人建议之前，我也不想使用JQuery或任何其他框架。

Answer 1

您必须阻止提交表单。这会触发您正在谈论的页面刷新。

<form id="setup" name="setup" onsubmit="return false;">
  <input id="entrybox" name="entry" type="text">
  <button type="submit" onclick="process()">Process</button>
</form>

@ boulder_02评论也是对的！

Answer 2

该按钮是submit按钮，因此它将提交表单。表单提交的默认操作是对action属性指定的URL进行请求。

如果您不想要重定向，您有两种选择：

完全禁用表单提交。这样，输入按下文本框将触发该功能，但不会重定向到新页面。

function process(e) {
  e.preventDefault();
  setupform = document.getElementById("setup");
  // ...
}

document.getElementById('form').addEventListener('submit', process, false);

将type属性更改为button，使按钮成为普通按钮。用户可能仍然会提交表单，从而重新加载页面。

在JavaScript提交操作期间从DOM中删除HTML表单

2 个答案: