JavaScript的onsubmit导致页面刷新

Question

非常简单的表单

<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>

以及 addDonor 函数

<script type="text/javascript">

function addDonor(){    
    alert("test");
    return false;
}
</script>

最终，该功能将包括一些jquery ajax以提交信息。但是，现在还需要一步步来实现。我甚至无法让警报框弹出来。另外，当我按下键盘上的“Enter”键时，整个页面都会刷新，当我点击“添加捐赠者”时，什么都不会发生。

我相信这一定是一个简单的问题。我认为这是那种需要别人指出的问题。

- Andelas

---

你的按钮没有 onclick 函数。另一个替代方案是用 <input type="submit" value="Add Donor" .../> 替换整个 <button> 标签。 - fireshadow52

你明确设置了按钮不是提交按钮：type="button"。移除它，按钮就会起作用。关于处理程序，请参见@Dennis的答案。 - Felix Kling

Answer 1

尝试在JavaScript中分配onsubmit事件：

document.getElementById("addDonor").onsubmit = function () {
    alert("test");
    return false;
}

问题在于您的函数名为addDonor，而元素的id也是addDonor。每个带有id的元素都在document下创建了一个对象以标识它。在内联onsubmit中尝试alert(addDonor)，就会发现它会警报一个HTML元素，而不是一个函数。内联函数在文档内部执行作用域链，因此在到达window.addDonor(您的函数)之前，addDonor指向document.addDonor。请确保函数名称和元素ID不同。

- Dennis

---

@Felix 那也可以。这只是个人偏好，你是否喜欢内联JavaScript。那只是我记起来的第一件事情，在此之前我还记得a）内联JS在文档范围内运行和b）具有ID的元素添加到document下面。 - Dennis

这很简单，就像我想象中的那样。以前从未遇到过这个问题。感谢您如此清晰地解释。 - Andelas

Answer 2

你应该将你的 <button> 改为 <input type="submit">（如 @fireshadow52 建议的那样），这应该可以解决你的问题。在将其放入页面或其他任何地方之前，你应该尝试 Wc3 Schools 在线 JavaScript 测试器 来尝试简单的 JavaScript。Google 也有类似的工具。此外，你通常可以在你所使用的浏览器上尝试 JavaScript 控制台。

- Muad'Dib

Answer 3

你的按钮明确设置为 type="button"，这不会使它提交表单。将其更改为 <button type="submit">，或者如果您喜欢（我个人喜欢 <button> 的样式选项），则更改为 <input type="submit">。

- orip