Question

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

Uncaught TypeError: Cannot set property 'action' of undefined

请建议我如何提交表格以调用弹簧控制器方法。

以下是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>

Spring控制器：

    @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;
}

Answer 1

在大多数浏览器中，应该提供，您在全球范围内没有var myForm或类似的东西。原因是，当您为form元素提供name属性时，浏览器将使用引用document的名称在form上创建一个属性。但是如果你在其他东西上使用相同的名字，它可能会与你认为正在使用的名称冲突。

解决这个问题的三个选择：

您已经标记了问题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，因此最小化 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();
});

未捕获的TypeError：无法设置undefined的属性'action'

1 个答案: