form表单的嵌套问题

最新推荐文章于 2025-04-10 23:54:27 发布

weixin_33688840

最新推荐文章于 2025-04-10 23:54:27 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

文章标签： python java javascript ViewUI

原文链接：https://my.oschina.net/u/3680343/blog/1591501

2019独角兽企业重金招聘Python工程师标准>>>

在做项目中使用到了表单的嵌套，很自然的就在一个表单里嵌套了另外一个表单，当在向后台提交数据的时候发现嵌套在里面的表单的数据拿不到，于是写了一个例子来总结在项目中遇到的问题

代码如下

<body>
   <form id="formDataSubmit" name="formDataSubmit">
      <div>
         <label>姓名</label>
         <input type="text" name="userName" class="userName">
      </div>
      <div>
         <label>年龄</label>
         <input type="text" name="age">
      </div>
      <div>
         <label>职业</label>
         <input type="text" name="occupation">
      </div> 
      <div>
         <form id="formData2">
            <div>
               <label>性别</label>
               <input type="radio" name="sex" id="sex" value="男" checked>
               <label>男</label>
               <input type="radio" name="sex" id="sex" value="女">
               <label>女</label>
            </div> 
            <div>
               <label>爱好</label>
               <input type="checkbox" name="checkbox" value="游泳">
               <label>游泳</label>
               <input type="checkbox" name="checkbox"  value="拳击">
               <label>拳击</label>
               <input type="checkbox" name="checkbox"  value="打篮球">
               <label>打篮球</label>
               <input type="checkbox" name="checkbox"  value="踢足球">
               <label>踢足球</label>
            </div> 
         </form>
      </div>
   </form>
   <button id="btnSubmit">提交</button>

</body>

效果如下：

@1：当我对最外层的表单进行序列化时得到的结果如下

@2：当我对内层的表单进行序列化时得到如下的结果

由@1与@2的图比较可知，内层表单并没有获取到值，百思不得解，就去元素里查看了一下

只显示了外层的form表单，内层的form表单并没有显示出来

展开元素你会发现，原来属于内层表单的元素现在都归到了外层表单里，这也导致了，提交按钮样式混乱的原因

所以在我序列化内层表单时，获得的才是空的数组

由以上得出结论，表单是不能嵌套的

但有时候需要用到表单的嵌套怎么办？比如：我用序列化表单提交数据，但是里面还包含上传图片显示的问题，因为要兼容ie8，就把图片用表单提交的形式提交数据，这时候就用到了表单的嵌套，解决办法就是，上传文件时弹出一个模态框，在模态框里进行文件的上传(就是以表单的形式提交数据)，然后再把得到的数据复制到表单的一个字段里