Override defaults with $.fn.form.defaults.
The form provides various methods to perform actions with form fields such as ajax submit, load, clear, etc. When submiting the form, the 'validate' method can be called to check whether or not a form is valid.
Create a simple HTML form. Construct this as you normally would with and id, action and method values.
- <form id="ff" method="post">
- <div>
- <label for="name">Name:</label>
- <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
- </div>
- <div>
- <label for="email">Email:</label>
- <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
- </div>
- ...
- </form>
To make the form become ajax submit form
- $('#ff').form({
- url:...,
- onSubmit: function(){
- // do some check
- // return false to prevent submit;
- },
- success:function(data){
- alert(data)
- }
- });
- // submit the form
- $('#ff').submit();
To do a submit action
- // call 'submit' method of form plugin to submit the form
- $('#ff').form('submit', {
- url:...,
- onSubmit: function(){
- // do some check
- // return false to prevent submit;
- },
- success:function(data){
- alert(data)
- }
- });
Submit with extra parameters
- $('#ff').form('submit', {
- url:...,
- onSubmit: function(param){
- param.p1 = 'value1';
- param.p2 = 'value2';
- }
- });
Submitting an ajax form is very simple. Users can get the response data when the submission is finished. Notice that the response data is the raw data from server. A parse action to the response data is required to get the correct data.
For example, response data is assumed to be JSON, a typical response data may look like this:
- {
- "success": true,
- "message": "Message sent successfully."
- }
Now handle the JSON string in 'success' callback function.
- $('#ff').form('submit', {
- success: function(data){
- var data = eval('(' + data + ')'); // change the JSON string to javascript object
- if (data.success){
- alert(data.message)
- }
- }
- });
Name | Type | Description | Default |
---|---|---|---|
url | string | The form action URL to submit | null |
Name | Parameters | Description |
---|---|---|
onSubmit | param | Fires before submit, return false to prevent submit action. |
success | data | Fires when the form is submitted successfuly. |
onBeforeLoad | param | Fires before a request is made to load data. Return false to cancel this action. |
onLoadSuccess | data | Fires when the form data is loaded. |
onLoadError | none | Fires when some errors occur while loading form data. |
Name | Parameter | Description |
---|---|---|
submit | options |
Do the submit action, the options parameter is an object which contains following properties: url: the action URL onSubmit: callback function before submit success: callback function after submit successfuly The example below shows how to submit a valid form and avoid duplicate submiting the form. $.messager.progress(); // display the progress bar $('#ff').form('submit', { url: ..., onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); // hide progress bar while the form is invalid } return isValid; // return false will stop the form submission }, success: function(){ $.messager.progress('close'); // hide progress bar while submit successfully } }); |
load | data |
Load records to fill the form.
The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record.
Code example: $('#ff').form('load','get_data.php'); // load from URL $('#ff').form('load',{ name:'name2', email:'mymail@gmail.com', subject:'subject2', message:'message2', language:5 }); |
clear | none | Clear the form data. |
reset | none | Reset the form data. This method is available since version 1.3.2. |
validate | none | Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin. |
enableValidation | none | Enable validation. This method is available since version 1.3.4. |
disableValidation | none | Disable validation. This method is available since version 1.3.4. |