easyui中的layout和table以及form嵌套使用导致form提交出现BUG，全为null值

来源：互联网发布：设置点击事件js 编辑：程序博客网时间：2024/04/29 05:01

才接触前端不久，各种浏览器适配问题，框架问题，让人恼火啊，解决上一篇博客的问题。easyuilayout+form+table嵌套使用导致无法提交form表单的问题，用ajax获取后台form表单全为NULL值

前端使用了easyui1.4.1

最开始出现问题的代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>    <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/demo/demo.css"> <title>新增专项信息</title> <style type="text/css">  input {height: 20px;} </style>   </head> <body class="easyui-layout">     <div data-options="region:'north',border:false" style="height:73px;background:#B3DFDA;padding:10px"></div>  <div data-options="region:'west',split:true,title:'暂无',collapsible:true" style="width:150px;padding:10px;"></div>  <div data-options="region:'center',collapsible:true,fit:true"  title="专项录入" >     <table width="1000px" >      <tr><td colspan="6"  style="background:rgb(224, 236, 255);" >    <strong >专项录入</strong></td></tr>   <form action="/addProject.do" id="ff">    <tr>         <td>项目名称</td>         <td><input class="easyui-validatebox textbox"  type="text"       name="projectName" data-options="required:true" value="" /></td>     </tr>     <tr>     <td colspan="6"  >       <input class="easyui-linkbutton" value="提交" type="submit" style="width:100px;height:40px"/>     </td>    </tr> </form> </table>   </div></body></html>

这么简单的代码，结果出现了一堆问题！首先是点击sumbit按钮不能自动跳转，若使用JS代码用AJAX传表单，后台获取不到值，获取的值全为NULL。另外，这段代码在IE9以下的浏览器不会出现问题，在chrome，firefox以及Safari都会出现上述问题。

没办法只好一点一点删除看结果，结果发现，使用layout+form没问题，table+form没问题，单单是三者同时使用有问题。看easyui的文档发现easyui重写了form =标签，估计是一个BUG，正想着干脆把table全部换成div好了，太麻烦···灵机一线，发现出现问题的代码使用的table标签嵌套form标签，是不是应该反过来？试了一下，换成form标签嵌套table标签，我去立马好了，我吐了一口鲜血出来···

解决方案：easyui layout嵌套form，form标签再嵌套table标签

更正后代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>    <script type="text/javascript" src="../ThreePart/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../ThreePart/jquery-easyui-1.4.1/demo/demo.css"> <title>新增专项信息</title> <style type="text/css">  input {height: 20px;} </style>   </head> <body class="easyui-layout">     <div data-options="region:'north',border:false" style="height:73px;background:#B3DFDA;padding:10px"></div>  <div data-options="region:'west',split:true,title:'暂无',collapsible:true" style="width:150px;padding:10px;"></div>  <div data-options="region:'center',collapsible:true,fit:true"  title="专项录入" >  <form action="/addProject.do" id="ff">     <table width="1000px" >      <tr><td colspan="6"  style="background:rgb(224, 236, 255);" >    <strong >专项录入</strong></td></tr>       <tr>         <td>项目名称</td>         <td><input class="easyui-validatebox textbox"  type="text"       name="projectName" data-options="required:true" value="" /></td>     </tr>     <tr>     <td colspan="6"  >       <input class="easyui-linkbutton" value="提交" type="submit" style="width:100px;height:40px"/>     </td>    </tr> </table> </form>   </div></body></html>

1 0