未捕获的类型错误：无法设置未定义的属性“操作”答案

【问题标题】：Uncaught TypeError: Cannot set property 'action' of undefined未捕获的类型错误：无法设置未定义的属性“操作”
【发布时间】：2015-02-06 10:28:02
【问题描述】：

我无法通过 javascript 函数提交表单。当用户单击链接时，我有一个要求，我需要提交表单。以下是在浏览器控制台上看到的错误：

Uncaught TypeError: Cannot set property 'action' of undefined

请建议我如何提交表单以调用 spring 控制器方法。

下面是javascript函数：

function submitDataOnClick(){
    document.myForm.action = contextPath + "/dataProcess.htm";
    document.myForm.submit();
}
<body>
<form name="myForm">
//all form elements..
<table class="myClass">
     <tr><td><a href="" onclick="submitDataOnClick()"> </a></td></tr>
 </table>
</form>
</body>

弹簧控制器：

    @RequestMapping(value = "/dataProcess", method = RequestMethod.GET)
    public ModelAndView dataProcess(HttpServletRequest request,
            HttpServletResponse response,
            BindingResult beException)
            throws IOException {

//logic...
    ModelAndView mav = new ModelAndView();
    mav.setViewName("home");
    return mav;
}

【问题讨论】：

使用id 和getElementById()，通过document 直接引用元素十年前已被弃用。
您必须在函数中传递对 myForm 的引用。或者正如第一位评论者所说，您可以使用 getElementById() 获取 myForm
@Teemu 虽然它已被弃用，但它应该仍然可以工作。知道他为什么会出错吗？
@Barmar 不知道，OP 的代码似乎在 FF as it is 中工作。

标签： javascript jquery html jsp spring-mvc

【解决方案1】：

在大多数浏览器中，只要您在任何地方都没有var myForm 的全局范围内的var myForm 或类似的东西。原因是当你给form 元素一个name 属性时，浏览器将使用引用form 的名称在document 上创建一个属性。但是，如果您在其他东西上使用相同的名称，它可能会与您认为您正在使用的名称发生冲突。

解决此问题的三个选项：

您已经标记了您的问题jquery，但您的代码中似乎没有使用 jQuery，因此是非 jQuery 选项：

如果您想使用链接提交表单，一种选择是为表单提供id，然后使用该链接进行查找：

HTML：
```
<form id="myForm" name="myForm">
```
（如果不需要，请删除name=...）

JavaScript：
```
function submitDataOnClick(){
    var form = document.getElementById("myForm");
    form.action = contextPath + "/dataProcess.htm";
    form.submit();
}
```

既然你做了标签jquery，一个minimal-change jQuery选项：

HTML：

<tr><td><a href="" onclick="submitDataOnClick($(this).closest('form')[0])"> </a></td></tr>

JavaScript：

function submitDataOnClick(form){
    form.action = contextPath + "/dataProcess.htm";
    form.submit();
}

...或更大的改变解决方案：完全摆脱链接上的onclick，并可能为这些链接添加一个类：

<tr><td><a href="" class="submit-on-click"> </a></td></tr>

...并将此代码放在表单后面的script 元素中（通常建议在最底部，就在关闭</body> 标记之前）：

$("form[name=myForm]").on("click", "a.submit-on-click", function() {
    var form = $(this).closest('form')[0];
    form.action = contextPath + "/dataProcess.htm";
    form.submit();
});

【讨论】：

我仍然面临这个问题，未捕获的类型错误：无法将属性“操作”设置为 null。请在 jsfiddle.net/0w9yo8x6/37 中找到我的完整示例。无论如何，小提琴无法看到上述异常。 @T.J。克劳德。请提出我错在哪里。
@user222：好吧，如果你在小提琴中看不到它，那么你需要看看小提琴和你的代码有什么不同。