html from嵌套from

在网页开发中我们可能会经常遇到一个form表单中出现一个文件上传form或者其他的form,不幸的是浏览器在解析的时候会只保留最外层的那一个,这会使得中间的form无法提交的问题出现,

下面是一种解决办法

<!--数据提交 所需要的form-->

<form id='mForm' method="post" target='frameFile' action="/controllers/orderManage/saveMaterial.php">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="dd_table mt20 b_t">
<tbody>
<tr id="{#$m['fld_ID']#}">
<td>普通素材</td>
<td>
<div class="over_hide fl formdiv">
<div class="file_input">

<!--文件上传 所需要的form-->
<input class="file_input1 fileUp" disabled type="file" name="file_{#$m['fld_ID']#}" />
<input type="hidden" name="allowSize" value='{#$allowSize#}'/>
<input type="hidden" name="mid" value="{#$m['fld_ID']#}"/>
</div>
</div>
<span class="fl fil_span">{#$imgNames[$m['fld_ID']]#}</span>
</td>
<td>
<p>{#$format[$m['fld_Type']]#}</p>
<input type="hidden" name="format_{#$m['fld_ID']#}" value={#$m['fld_Type']#} />
<input type="hidden" name="ext_{#$m['fld_ID']#}" value="{#$exts[$m['fld_ID']]#}" />
<input type="hidden" name="fileSize_{#$m['fld_ID']#}" value="{#$m['fld_Size']#}" />
</td>
<td class="pr">
<a href="javascript:;" class="bread_c selectCate">素材类型</a>
<div class="tc_file" style='display:none;'>
<a href="javascript:;" class="tc_sclose closeCate"></a>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table_no mt20">
<tr>
<td class="tar">素材分类:</td>
<td class="tal">
<select class="sel fl mr10 bdcategory" style="137px;">
<option value='0'>一级分类</option>
{#foreach from=$categoryList item=t#}
<option value="{#$t['bdcat']#}">{#$t['name']#}</option>
{#/foreach#}
</select>
<select name="childCate_{#$m['fld_ID']#}" class="sel fl childCate" style="137px;">
<option value='0'>二级分类</option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>

<!--提取中间的form在最外层-->

<form id='publicForm' name='formFile' method="post" action="/controllers/orderManage/upload.php" target='frameFile' enctype="multipart/form-data">
</form>

<!--jquery实现-->

$('.fileUp').bind('change', function(){
$('#publicForm').append($(this).parent().children());
$('#publicForm').submit();
})

整体思路:就是把单独提交的数据提取到一个公用的from中单独提交,文件上传也可已使用。

原文地址:https://www.cnblogs.com/dilei/p/4667261.html