在做项目中使用到了表单的嵌套,很自然的就在一个表单里嵌套了另外一个表单,当在向后台提交数据的时候发现嵌套在里面的表单的数据拿不到,于是写了一个例子来总结在项目中遇到的问题
代码如下
<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,就把图片用表单提交的形式提交数据,这时候就用到了表单的嵌套,解决办法就是,上传文件时弹出一个模态框,在模态框里进行文件的上传(就是以表单的形式提交数据),然后再把得到的数据复制到表单的一个字段里