form表单深入理解

作者：zccst
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时，表单不提交。