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

最新推荐文章于 2019-12-23 14:33:16 发布

蒙太奇zz

最新推荐文章于 2019-12-23 14:33:16 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/lzlun129/article/details/42420933

WEB前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个关于EasyUI框架中布局、表单及表格元素嵌套使用导致的表单提交失败问题，并提供了解决方案，即调整表单与表格的嵌套顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

才接触前端不久，各种浏览器适配问题，框架问题，让人恼火啊，解决上一篇博客的问题。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>