用Struts2、jQuery时document.getElementById取表单值为undefined

代码错误点及修复方案 #

• 首先有一处不影响取值但存在兼容性风险的语法问题：你为点击事件定义的形参是evt，但阻止默认提交时调用的是未声明的event变量，部分没有全局window.event对象的浏览器会直接抛出脚本错误，需要修改为evt.preventDefault()。
• 导致取值为undefined的核心原因和Struts2表单的默认渲染逻辑相关：
  Struts2的<s:form>标签默认使用xhtml主题，会自动生成额外的DOM结构、给表单内元素附加命名前缀，甚至可能导致你写的原生<input id="ss">的id属性被覆盖，或者页面出现多个重复的ss id，此时选择器匹配到的不是你输入内容的那个input，就会返回undefined。同项目其他表单正常大概率是因为其他表单显式指定了theme属性，或者用了Struts2自带的表单标签而非原生input。

修复步骤 #

1. 给<s:form>显式指定theme="simple"，关闭默认的自动结构生成逻辑，同时建议给原生input显式声明type属性，避免浏览器解析异常，修改后的前端代码如下：

<s:div>
    <s:form theme="simple" action="你实际的表单提交地址">
        <label>Enter PNR value :
        <input id="ss" type="text">
        </label>
        <s:submit id="regSub" value="Submit"></s:submit>
    </s:form>
</s:div>

2. 修复jQuery代码的参数问题，同时增加排查逻辑确认选择器匹配结果：

$(document).ready(function(){
    $('body').on('click','#regSub',function(evt){  
        evt.preventDefault();
        console.log("匹配到的id为ss的元素数量：", document.querySelectorAll('#ss').length);
        console.log($('#ss').val());
        console.log(document.getElementById('ss').value);
    })
});

如果修改后还是存在问题，直接打开浏览器开发者工具的元素面板，搜索id="ss"确认渲染后的实际DOM结构，就能快速定位问题。

内容的提问来源于stack exchange，提问作者Logesh balaji