Plugins Form Form
* * jQuery EasyUI Plugin](#)
* * *
Override the default defaults via `$.fn.form.defaults`.
The form provides several methods to perform actions with form fields, such as ajax submission, loading, clearing, etc. When submitting the form, the 'validate' method is called to check if the form is valid.
## Usage
Create a simple HTML form. Build the form and assign id, action, and method.
...
Make the form an ajax submission form.
$('#ff').form({ url:..., onSubmit: function(){// do some check// return false to prevent submit; }, success:function(data){alert(data) }});// submit the form $('#ff').submit();
Perform 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'; }});
#### Handling the Submit Response
Submitting an ajax form is very simple. When the submission is complete, the user can get the response data. Please note that the response data is the raw data from the server. Parsing the response data requires obtaining the correct data.
For example, assuming the response data is in JSON format, a typical response data looks like this:
{ "success": true, "message": "Message sent successfully."}
Now handle the JSON string in the 'success' callback function.
$('#ff').form('submit', { success: function(data){var data = eval('(' + data + ')'); // change the JSON string to javascript objectif (data.success){alert(data.message)} }});
## Properties
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| url | string | The URL of the form action to submit to. | null |
## Events
| Name | Parameters | Description |
| --- | --- | --- |
| onSubmit | param | Fires before submit, return false to prevent the submit action. |
| success | data | Fires when the form is submitted successfully. |
| 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 error occurs while loading form data. |
## Methods
| Name | Parameters | Description |
| --- | --- | --- |
| submit | options | Perform the submit action. The options parameter is an object that contains the following properties: url: the URL of the action onSubmit: callback function before submit success: callback function after submit success The following example demonstrates how to submit a valid form and avoid duplicate form submissions. $.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 a record to fill the form. The data parameter can be a string or object type, the string as a remote URL, otherwise 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 | Perform the form field validation, return true when all fields are valid. This 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. |
* * jQuery EasyUI Plugin](#)
YouTip