Form（表單）

使用$.fn.form.defaults重寫預設值物件

form提供了各種方法來操作執行表單欄位，比如：ajax提交, load, clear等等。當提交表單的時候可以呼叫validate方法檢查表單是否有效。

用法

建立一個簡單的HTML表單。構建一個包含id、action和method值的表單元素。

1. <form id="ff" method="post">  
2.     <div>  
3.         <label for="name">Name:</label>  
4.         <input class
   ="easyui-validatebox" type="text" name="name" data-options="required:true" />  
5.     </div>  
6.     <div>  
7.         <label for="email">Email:</label>  
8.         <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />  
9.     </div>  
10.     ...   
11. </form>  

使普通表單成為ajax提交方式的表單。

1. $('#ff').form({   
2.     url:...,   
3.     onSubmit: function(){   
4.         // do some check   
5.         // return false to prevent submit;   
6.     },   
7.     success:function(data){   
8.         alert(data)   
9.     }   
10. });   
11. // submit the form   
12. $('#ff').submit();  

做一個提交操作。

1. // call 'submit' method of form plugin to submit the form   
2. $('#ff').form('submit', {   
3.     url:...,   
4.     onSubmit: function(){   
5.         // do some check   
6.         // return false to prevent submit;   
7.     },   
8.     success:function(data){   
9.         alert(data)   
10.     }   
11. });  

提交額外的引數。

1. $('#ff').form('submit', {   
2.     url:...,   
3.     onSubmit: function(param){   
4.         param.p1 = 'value1';   
5.         param.p2 = 'value2';   
6.     }   
7. });  

處理提交響應

提交一個ajax表單是非常簡單的。使用者可以在提交完成後獲取響應資料。注意，響應的資料是來自伺服器的原始資料。A parse action to the response data is required to get the correct data.

例如，響應資料假設為JSON，一個典型的響應資料格式如下：

1. {   
2.     "success": true,   
3.     "message": "Message sent successfully."  
4. }  

現在在'success'回撥函式中處理JSON字串。

1. $('#ff').form('submit', {   
2.     success: function(data){   
3.         var data = eval('(' + data + ')');  // change the JSON string to javascript object   
4.         if (data.success){   
5.             alert(data.message)   
6.         }   
7.     }   
8. });  

屬性

事件

方法

$.messager.progress();	// 顯示進度條
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// 如果表單是無效的則隱藏進度條
		}
		return isValid;	// 返回false終止表單提交
	},
	success: function(){
		$.messager.progress('close');	// 如果提交成功則隱藏進度條
	}
});

$('#ff').form('load','get_data.php');	// 讀取表單的URL

$('#ff').form('load',{
	name:'name2',
	email:'[email protected]',
	subject:'subject2',
	message:'message2',
	language:5
});