【问题标题】：this.form Is Not Passing Form In A JavaScript Functionthis.form 不是在 JavaScript 函数中传递表单
【发布时间】：2023-03-29 22:50:01
【问题描述】：

我的单个网页上有太多表单，每个表单的名称都不同。现在我在每个表单中都有一个按钮，它使用固定参数获取该表单并将其传递给 JavaScript 函数。但在我的情况下，它不起作用并给我Uncaught TypeError: Cannot read property 'name' of undefined 或 `Uncaught ReferenceError: updateContact 未定义的错误。我的脚本文件附在这些表格之前以及这些表格之后以供检查。你可以看到一个直播的DEMO At JSFiddle 有这个错误。

JavaScript：

<script type="text/JavaScript">
function updateContact(formName, id){
    var currentFormName = formName.name;
    alert(currentFormName + " - " + id);
}
</script>

HTML：

<form method="post" action="" name="updateAllContact0">
<a onClick="updateContact(this.form, 0)" >Update</a>
</form>
<form method="post" action="" name="updateAllContact1">
<a onClick="updateContact(this.form, 1)" >Update</a>
</form>
<form method="post" action="" name="updateAllContact2">
<a onClick="updateContact(this.form, 2)" >Update</a>
</form>
<form method="post" action="" name="updateAllContact3">
<a onClick="updateContact(this.form, 3)" >Update</a>
</form>
<form method="post" action="" name="updateAllContact4">
<a onClick="updateContact(this.form, 4)" >Update</a>
</form>
<form method="post" action="" name="updateAllContact5">
<a onClick="updateContact(this.form, 5)" >Update</a>
</form>
<!--
.
// Too Many Forms Of Unknown Length
.
<form method="post" action="" name="updateAllContactN">
<a onClick="updateContact(this.form, N)" >Update</a>
</form>
-->

现在我的代码有什么问题...???

【问题讨论】：

标签： javascript html forms parameter-passing this

【解决方案1】：

尝试用this.parentElement.form 替换this.form。 <a> 元素没有 form 子节点。 <form> 是 .parentElement 的 <a> 元素。

【讨论】：

还有Uncaught TypeError: Cannot read property 'name' of undefined错误...
@MuhammadHassan 参见 jsfiddle jsfiddle.net/uamvn58z。将 .parentElement 替换为 .form 应该会返回预期的结果。 "Still have Uncaught TypeError: Cannot read property 'name' of undefined" 你能创建 jsfiddle jsfiddle.net 来演示吗？

【解决方案2】：

一个问题是您不需要将 onclick 驼峰式化 - 它应该是

 <a `...onclick="updateContact(this.form, 0)" >Update</a>...`

其次 - 这很混乱 - 你应该能够清理它并在 js 中而不是在 HTML 中分配 onclick 事件处理程序

【讨论】：

使用 onclick 后仍然出现Uncaught TypeError: Cannot read property 'name' of undefined 错误。

【解决方案3】：

这显然是一个很晚的回复，我在尝试查找此表单在 HTML 页面中的作用时遇到了某些问题，因此我将回答其他人也可以学习的问题。

1) 你的代码是完美的，我只是将所有的 <a> 锚链接更改为 <button> 按钮，然后代码就成功了。

2) 你的代码在函数的末尾和内部 (this.form, N)

<form method="post" action="" name="updateAllContactN">
<a onClick="updateContact(this.form, N)">Update</a>
</form>

它应该像下面的那样。因为 "N" 是引号内的字符串，否则它会给出错误。

updateContact(this.form, 'N');

我知道我将锚链接更改为按钮，但是使用锚文本不会对我产生任何结果。我不知道 <a> 是否可能。无论如何错误：

"Uncaught TypeError: Cannot read property 'name' of undefined or `Uncaught ReferenceError: updateContact is not defined"

可能是因为在函数内部传递的“this.form”在没有名称的情况下单独打印时返回[object HTMLFormElement]。因此它的值也未定义它显示此错误。 IDK这个错误可能是因为锚链接，我没有那些错误只是运行你的代码..

希望对你有帮助。

【讨论】：