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;
}
-
2
Use
idandgetElementById(), direct reference to elements viadocumenthas 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
jquerybut 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
idand 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
onclickon 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
scriptelement 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(); });