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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 07:22:56  来源:igfitidea点击:

Uncaught TypeError: Cannot set property 'action' of undefined

javascriptjqueryhtmljspspring-mvc

提问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 myFormat global scope anywhere or something like that. The reason is that when you give a formelement a nameattribute, the browser will create a property on documentusing 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:

解决这个问题的三个选项:

  1. 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();
    }
    
  2. 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();
    }
    
  3. ...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 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();
    });
    
  1. 您已标记您的问题,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();
    }
    
  2. 既然你做了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();
    }
    
  3. ...或更大的更改解决方案: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();
    });