您的位置：首页 > 产品设计 > UI/UE

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

2015-01-05 12:47 429 查看
才接触前端不久，各种浏览器适配问题，框架问题，让人恼火啊，解决上一篇博客的问题。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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航