按钮的 Onclick 函数在 form.javascript jquery 中不起作用

Question

在我的代码中，addDvcPeople(( 的 onclick 函数在没有形式的情况下工作正常。 但是一旦添加了表单，addDvcPeople(( 的 onclick 函数就会失败。 这是没有表单的代码，可以正常工作：

<div class="dvcOnShlv" id="dvcOnShlv">
<!--<form action="modify_idc_addDVC.php?act=add&table=IDC" method="POST">-->
<table border="1px" cellspacing="0"  id="staTable">
<tr>
<h2 align="center">IDCtable</h2>
</tr>
<tr>
<td style="width:15%" id="addDvcWorker">engineer<br /><input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="addpeople"></td>
</tr>
</table>
<!--</form>-->
</div>

我的addDvcPeople((代码是：

<script>
function addDvcPeople()
{
alert("test");
}
</script>

一旦添加了"form"句子，函数addDvcPeople((什么也没做。 我不知道为什么。谁能帮助我？

Answer 1

您遇到的主要问题是您为按钮提供了与函数名称相同的 ID。您需要确保这些是不同的，否则您的函数将始终以undefined形式出现：

function addDvcPeople() {
alert("test");
}

<form>
<input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="Button">
</form>

此处显示了使用不同 ID 的工作：

function addDvcPeople() {
alert("test");
}

<form>
<input type="button" id="addDvcPeopleID" onclick="addDvcPeople()" value="Button">
</form>

您将遇到的第二个问题是表单提交具有实际提交表单的默认行为，即使没有submit输入，这意味着单击按钮后表单将消失：

function addDvcPeople() {
alert("test");
}

<form>
<button onclick="addDvcPeople()">Button</button>
</form>

要解决此问题，您需要通过以下event来覆盖默认表单提交：

function addDvcPeople(event) {
event.preventDefault();
alert("test");
}

<form>
<button onclick="addDvcPeople(event)">Button</button>
</form>

请注意，在上面的示例中，页面不会刷新，并且会显示警报。

希望这有帮助！ :)

Answer 2

你只是不设置重复的 id 和函数名称