form表单提交和重置小结

1. input标签

• 1.1>input[type=submit]

<form name=”form” method=”post” action=”#">
    <input type=”submit” name=”btn” value=”提交">
</form>

input的type属性是submit，会引发表单提交。

作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>'提交';

• 1.2>input[type=button]

input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。

<form name=”form” method=”post” action=”#">
    <input type=”button” name=”btn” value=”提交">
</form>

2. button[type=submit]

type的默认值是submit，所以点击一个button，会引起表单提交

注意：button[type]在IE中的默认值是button，这意味着它只是一个按钮而不会引发表单提交,

请注意设置type=submit来兼容IE。

button可以设置name和value,提交表单时，value会被作为表单数据提交给服务器,

<form>
     <input type="text" name='name'>
     <button>提交</button>
</form>

3. 用法举例

<form id="myform" name="myform" method="post action="/form-submit">
    <input type="submit" value="Submit普通提交">
	<input type="button" id="ajaxBtn" value="AJAX提交" />
	<input type="button" id="jqueryBtn" value="jQuery提交" />
	<input type="button" id="jsBtn" value="JS提交" />
</form>

<script type="text/javascript">

	//ajax提交
	$("#ajaxBtn").click(function() {
	   //可以获取表单的所有提交信息
		var params = $("#myform").serialize();
		$.ajax( {
			type : "POST",
			url : "/form-submit",
			data : params,
			success : function(msg) {
				alert("success: " + msg);
			}
		});
	})

	//jQuery提交
	$("#jqueryBtn").click(function(){
	    //可以修改表单属性，比如action，这样可以使用一个表单，提交到不同处理器
	    //$('#myform').attr('action','/form-submit');
		$("#myform").submit();
	})

	//js提交
	$("#jsBtn").click(function(){
		//document.myform.action="/form-submit";
	    document.myform.submit();
	})

</script>

4. 表单重置

• 1：通过from的id实现

document.getElementById("formId").reset();

注意，JQuery中没有直接的reset方法，需要像下面这样写

$('#formId')[0].reset();

• 2：通过Name实现

document.formName.reset();

• 3：直接给input传空值

$("input").val("");
$("input[type='text']").val('')
$("input[type='checkbox']").removeAttr('checked')

参考：

http://www.tuicool.com/articles/3my6Rf

http://blog.csdn.net/itmyhome1990/article/details/41849175?utm_source=tuicool&utm_medium=referral