javascript 未捕获的类型错误:无法设置未定义的属性“动作”
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27363544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot set property 'action' of undefined
提问by user222
I could not able to submit the form through javascript function. I have a requirement when user clicks on a link, i need to submit a form. Below is the error seen on browser console:
我无法通过 javascript 函数提交表单。当用户单击链接时,我有一个要求,我需要提交一个表单。以下是在浏览器控制台上看到的错误:
Uncaught TypeError: Cannot set property 'action' of undefined
Please suggest how can i submit the form to invoke the spring controller method.
请建议我如何提交表单以调用弹簧控制器方法。
Below is the javascript function:
下面是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 controller:
弹簧控制器:
@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;
}
回答by T.J. Crowder
In most browsers, that should work providedyou don't have a var myForm
at global scope anywhere or something like that. The reason is that when you give a form
element a name
attribute, the browser will create a property on document
using that name that refers to the form
. But if you use that same name on something else, it can conflict with the one you think you're using.
在大多数浏览器中,只要您var myForm
在任何地方都没有全局范围或类似的东西,这应该可以工作。原因是当你给一个form
元素一个name
属性时,浏览器将创建一个document
使用该名称的属性,该名称引用form
. 但是,如果您在其他东西上使用相同的名称,它可能会与您认为正在使用的名称发生冲突。
Three options for working around that:
解决这个问题的三个选项:
You've tagged your question
jquery
but don't appear to be using jQuery in your code, so a non-jQuery option:If you want to use a link to submit the form, one option is to give the form an
id
and then use that to look it up:HTML:
<form id="myForm" name="myForm">
(remove
name=...
if you don't need it)JavaScript:
function submitDataOnClick(){ var form = document.getElementById("myForm"); form.action = contextPath + "/dataProcess.htm"; form.submit(); }
Since you didtag
jquery
, a minimal-changejQuery option: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(); }
...or a bigger-changes solution: Get rid of the
onclick
on the link entirely and perhaps add a class to those links:<tr><td><a href="" class="submit-on-click"> </a></td></tr>
...and put this code in a
script
element after the form (usual recommendation is at the very bottom, just before the closing</body>
tag):$("form[name=myForm]").on("click", "a.submit-on-click", function() { var form = $(this).closest('form')[0]; form.action = contextPath + "/dataProcess.htm"; form.submit(); });
您已标记您的问题,
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(); }
既然你做了tag
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(); });