jQuery EasyUI Form Plugin -Form Form

jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.fn.form.defaults.

The form provides multiple methods to perform actions with form fields, such as ajax submit, load, clear, and so on. When submitting the form, call the 'validate' method to check whether the form is valid.

Usage

Create a simple HTML form. Construct the form and assign values to id, action, and method.

<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>

Make the form an ajax-submitted 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 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 additional parameters

$('#ff').form('submit', {
    url:...,
    onSubmit: function(param){
        param.p1 = 'value1';
        param.p2 = 'value2';
    }
});

Handle the submit response

Submitting an ajax form is very simple. When the submission is complete, the user can obtain the response data. Please note that the response data is the raw data from the server. A parsing action on the response data is required to obtain the correct data.

For example, assuming the response data is in JSON format, a typical response data is as follows:

{
    "success": true,
    "message": "Message sent successfully."
}

Now process the JSON string in the '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)
        }
    }
});

Properties

Name Type Description Default Value
url string The form action URL to submit. null

Events

Name Parameters Description
onSubmit param Triggered before submission; return false to prevent the submit action.
success data Triggered when the form is submitted successfully.
onBeforeLoad param Triggered before a request is sent to load data. Return false to cancel this action.
onLoadSuccess data Triggered when the form data is loaded.
onLoadError none Triggered when an 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: the callback function before submission
success: the callback function after successful submission

The following example demonstrates how to submit a valid form and avoid duplicate form submission.
$.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 populate the form. The data parameter can be a string or an object type. A string is used 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:'[email protected]',
    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 form field validation; return true when all fields are valid. This method is used together 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 插件jQuery EasyUI Plugin Other Extensions