最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Uncaught TypeError: Cannot set property 'action' of undefined - Stack Overflow

programmeradmin6浏览0评论

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 and getElementById(), direct reference to elements via document 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
Add a ment  | 

1 Answer 1

Reset to default 3

In 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:

  1. 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();
    }
    
  2. 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();
    }
    
  3. ...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();
    });
    
发布评论

评论列表(0)

  1. 暂无评论