form表单深入懂得

form表单深入理解
form表单

一、表单基础
作用：用来向服务器端提交数据。将form表单里的所有内容一起提交到服务器端。


特点：
1，一个form表单应该只有一个submit的按钮。

2，上传多个文件如果分开上传应该使用多个表单；如果一起上传，则使用一个表单。

3，如果一个页面中有多个表单，则提交时，不同表单内的空间可以同名。


二、动态创建表单

<div id="upForms"><form id="fileitemdiv1" action="<?php echo $this->createUrl('repairUpload'); ?>" method="post" enctype="multipart/form-data" target="upload_target"><input type="file" name="repair_attached_file1" />&nbsp;<input type="submit" name="submitBtn" value='立即上传' /><span id="upload_repairinfo_success1" style="color:red;"></span><input type="hidden" name="selectedIndex" value="1" /><!-- 记录上传成功后的id --><input type="hidden" name="upload_save_to_db_id" id="upload_save_to_db_id1" value="0" /></form><iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe></div><div><input type="button" value="增加附件" onclick="addfile();"><input type="hidden" id="up_success_file_ids" /></div>

var filecount=1;// 新增一个上传文件控件function addfile(){var filediv = document.getElementById("upForms");var fileitemdiv = document.createElement("form");filecount++;var content = "<input type=file name=repair_attached_file"+filecount + ">&nbsp;&nbsp;<input type=submit name=submitBtn value='立即上传' />&nbsp;&nbsp;<a href='javascript:removefile("+filecount + ");'>删除</a>&nbsp;&nbsp;<span id=upload_repairinfo_success"+filecount + " style='color:red;'></span><input type=hidden value="+filecount + " name=selectedIndex /> <input type=hidden name=upload_save_to_db_id id=upload_save_to_db_id"+filecount + " value=0 />";fileitemdiv.id       = "fileitemdiv"+filecount;fileitemdiv.method   = "post";fileitemdiv.enctype  = "multipart/form-data";fileitemdiv.target   = "upload_target";fileitemdiv.action   = "<?php echo $this->createUrl('repairUpload'); ?>";fileitemdiv.innerHTML = content;filediv.appendChild(fileitemdiv);}//删除指定上传文件控件function removefile(fileIndex){var filediv = document.getElementById("upForms");var fileitemdiv = document.getElementById("fileitemdiv"+fileIndex);filediv.removeChild(fileitemdiv);}

三、避免表单重复提交
方案1，限制次数。
a. 使用onsubmit
使用onsubmit="return startUpload()"
b. 设置按钮只按一次就失效

<input type="button" value="只提交一次" onclick="this.disabled=true;this.form.submit()" />

方案2，最后一次生效，把之前的覆盖。
上面采用就是。

参考：
http://developer.51cto.com/art/200912/166148.htm
http://hi.baidu.com/squiant/blog/item/21068ec59301afae8226ac09.html

其他：
a，通过js【上面已描述】
b，通过session
c，通过cookie
d，通过跳转

四、onsubmit的使用
<form .... onsubmit="return validate()"></form>
onsubmit事件就是针对<input type="submit" />的。

在js中，在validate函数进行验证等。默认返回true，即提交表单。指定返回false时，表单不提交。

查看更多 下一篇