jQuery EasyUI form plugin - Form Form

usage

Create a simple HTML form. Build a form and give id, action, method assignments.

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

Let the form (form) become ajax form 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 ();

Do a submission 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)
    }
});

By submitting additional parameters

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

Submit Response Processing

Submit a ajax form (form) is very simple. When submitting a completed user can obtain the response data. Note that the response data is the raw data from the server. Analytical data for response action requesting the correct data.

For example, assume that the response is JSON data format, a typical response data are as follows:

{
    "Success": true,
    "Message": "Message sent successfully."
}

Now handles JSON string '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)
		}
    }
});

Attributes

event

method

$.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
	}
});

$('#ff').form('load','get_data.php');	// load from URL

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