阻止 web form 表单提交和提交
设计了一个简单的提交表单:
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="action" value="{crypt_action('upgrate_member')}"/>
<table class="upgrade_form" border="1" cellpadding="10">
<tbody>
<tr>
<td width="324">公司名:<input type="text" name="member[company]" value="" style="width: 76%;"/></td>
<td width="324">公司类型:{dselect($COM_TYPE, 'member[type]', '请选择', '', 'id="type"', 0)}</td>
<td width="324">公司电话:<input type="text" name="member[telephone]" value="" style="width: 76%;"/></td>
</tr>
<tr>
<td>公司成立年份:<input type="text" name="member[regyear]" value="" size="4" style="width: 26%;"/><span>(年份,如:2014)</span></td>
<td>公司地址:<input type="text" name="member[address]" value="" style="width: 76%;"/></td>
{php echo $CFD ? fields_html_particular('<td>', '</td>', array(), $CFD) : '';}
</tr>
<tr>
<td colspan="3">主营行业:{category_checkbox("member[catid]", 4)}<span>(最多可选 6 个主营行业)</span>
</td>
</tr>
<tr>
<td colspan="3">主要经营范围:<input type="text" name="member[business]" value="" style="width: 90%;"/></td>
</tr>
<tr>
<td colspan="3">
<span style="float: left;">公司介绍:</span>
<textarea name="member[content]" rows="5" maxlength="100" style="border: 0;width: 950px;"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input name="submit" type="submit" value="提交申请" /></td>
</tr>
</tbody>
</table>
</form>
本来提交按照正常流程提交是没有问题的,但检查数据发现,以 checkbox 多选框展示的主营行业,只是一个数值,并不是数组。
原来是提交 checkbox 多选框的多个数值时,需要在每项的 name 属性后添加一个方括号 []
,这样做的目的是让表单提交后这个字段在后台脚本接收时,自动合并成数组形式。
添加之后:
<td colspan="3">主营行业:{category_checkbox("member[catid][]", 4)}<span>(最多可选 6 个主营行业)</span></td>
再次提交,destoon 框架报错;HTTP 403 Forbddin - Bad Data
。查找错误出处,原来 destoon 框架在接收客户端 $_GET/$_POST/$_REQUEST 数据时,会检查每一项的键值。对于 key 部分使用 strip_key
检查函数,它会遍历每一级的 key 值,看是否符合标准。而 member[catid][]
第二级数组 key 值为空,显然不符合,请求被驳回了。
框架为了安全考虑,form 表单中正常的 checkbox 传递数组方式就不能用了。这有点遗憾,但还是可以通过其他方式解决的,那就是使用一个 hidden 类型字段存储 checkbox 值(字符串拼接)。
<td colspan="3">主营行业:{category_checkbox("catid", 4)}<span>(最多可选 6 个主营行业)</span>
<input type="hidden" name="member[catid]" value=""/>
</td>
在表单提交之前,遍历 catid 值,拼接放到 member[catid]
隐藏字段中。
<form action="" method="post" enctype="application/x-www-form-urlencoded" onsubmit="beforeSubmit()">
...
<script type="application/javascript">
function beforeSubmit() {
var catid = [];
$("input[name='catid']:checked").each(function(i){
catid.push($(this).val());
});
$('input[name="member[catid]"]').val(catid.join(","));
return true;
}
</script>
通过修改函数 return 返回值,可以操控表单的提交和阻止提交。但是当 return 为 false 时,表单依然提交了。
检查了一遍,原来 onsubmit 绑定的 handler 函数 beforeSubmit ,在绑定时也要调用 return,即 return beforeSubmit();
。
添加上 return,问题解决。
<form action="" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return beforeSubmit()">
...
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »