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