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="width: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="width: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中單獨提交，文件上傳也可已使用。