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:
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:
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;
}
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:
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:
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;
}
Share
Improve this question
edited Dec 8, 2014 at 21:09
user222
asked Dec 8, 2014 at 17:31
user222user222
5973 gold badges12 silver badges31 bronze badges
4
-
2
Use
id
andgetElementById()
, direct reference to elements viadocument
has been deprecated for a decade ago. – Teemu Commented Dec 8, 2014 at 17:33 - You have to pass a reference to myForm in your function. Or as the first menter stated you can get myForm with getElementById() – Funk Doc Commented Dec 8, 2014 at 17:36
- @Teemu Although it's deprecated, it should still work. Any idea why he's getting an error? – Barmar Commented Dec 8, 2014 at 17:42
- @Barmar No idea, OP's code seems to work in FF as it is. – Teemu Commented Dec 8, 2014 at 17:46
1 Answer
Reset to default 3In most browsers, that should work provided you 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.
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 did tag
jquery
, a minimal-change jQuery 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 remendation 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(); });