jQuery EasyUI Form Plugin - Form

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

The form provides various 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 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-submitting 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';
    }
});

Handling Submit Response

Submitting an ajax form is straightforward. Users can obtain response data when the submission is complete. Note that the response data is 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 object
        if (data.success){
            alert(data.message)
        }
    }
});

Properties

Events

Methods