jquery and Form plugin use

[Introduction to the jquery Framework app]:form.js official plugin

Form plug-in, support Ajax, support Ajax file upload, powerful, basic to meet the daily application.

1. jquery Framework Package Download

2. Form plugin Download

3. Simple introduction of Form plugin
First step: Add a form first

<form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <textarea name="comment"></textarea> <input type="submit" value="Submit Comment" /> </form>

Step two: Inclusion of jquery.js and form.js files

<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/form.js"></script> <script type="text/javascript"> // wait for the DOM to be loaded           $(document).ready(function() { // bind ‘myForm‘ and provide a simple callback function           $(‘#myForm‘).ajaxForm(function() { alert("Thank you for your comment!"); }); }); </script>

3, the form plug-in detailed use method and application example

http://www.malsup.com/jquery/form/

============================
The author of the plugin, when introducing Form.js, said this sentence:

Submitting a form with AJAX doesn‘t get any easier than this!

Form plug-in API


English Original: http://www.malsup.com/jquery/form/#api

The form plug-in API provides several ways for you to easily manage form data and make form submissions.

Ajaxform

Add all the required event listeners to prepare for the AJAX submission form. Ajaxform cannot submit the form. In the ready function of document, use Ajaxform to prepare the form for the AJAX submission. A ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Available links (chainable): Yes.

Instance:

$ (' #myFormId '). Ajaxform ();

ajaxsubmit


can be linked (chainable): Yes.  

instance:
//binding form Submission event handler
$ (' #myFormId '). Submit (function () {
//submit Form
$ (This). Ajaxsubmit ();
//in order to prevent the normal browser from making form submissions and generating page navigation (Prevent page refresh?). ) returns false
return false;

formserialize

Serialize (or serializes) the form into a query string. This method returns a string in the following format: Name1=value1&name2=value2.
can be linked (chainable): No, this method returns a string.  

instance:
var queryString = $ (' #myFormId '). Formserialize ();

$.post (' myscript.php ', queryString);

Fieldserialize

Serializes (or serialize) a form's field elements into a single query string. This is handy when only a subset of the form fields need to be serialized (or serializable). This method returns a string in the following format: Name1=value1&name2=value2.
can link (chainable): No, this method returns a string.

Instance:
var queryString = $ (' #myFormId. Specialfields '). Fieldserialize ();

Fieldvalue

Returns the value of the form element that matches the inserted array. Starting with version 0.91, the method will always return data as an array. If the element value is judged to be invalid, the array is empty, otherwise it will contain one or more element values.
can link (chainable): No, the method returns an array.

Instance:
Get Password Input value
var value = $ (' #myFormId:p assword '). Fieldvalue ();
Alert (' The password is: ' + value[0]);

Resetform

Restores the form to its original state by invoking the original Dom method of the form element.
Available links (chainable): Yes.

Instance:
$ (' #myFormId '). Resetform ();

ClearForm

Clears the form element. This method empties all text (text) input fields, password (password) input fields, and text area (textarea) fields, clearing the selection in any SELECT element. and resets all the Radio (radio) buttons and the multi-select (checkbox) buttons to unselected states.
Available links (chainable): Yes.

$ (' #myFormId '). ClearForm ();

Clearfields

Clears the field element. Easy to use only if some form elements need to be cleared.
Available links (chainable): Yes.

$ (' #myFormId. Specialfields '). Clearfields ();

Options Object

both Ajaxform and Ajaxsubmit support a wide range of option parameters, which can be provided using an options object. The options is just a JavaScript object that contains a collection of properties and values as follows:

Target

indicates the element in the page that is updated by the server response. The value of the element may be specified as a jquery selector string, a jquery object, or a DOM element.
default value: null.

URL

Specifies the URL to submit the form data.
Default value: The Action property value of the form

type

Specifies the method by which the form data is submitted: "GET" or "POST".
Default Value: The Method property value of the form (if no default is found for "GET").

Beforesubmit

the callback function that was called before the form was submitted. The "Beforesubmit" callback function is provided as a hook to run the pre-commit logic or to validate the form data. If the "Beforesubmit" callback function returns false, the form will not be committed. The "Beforesubmit" callback function has three invocation parameters: form data in array form, jquery form objects, and options objects in the incoming ajaxform/ajaxsubmit. The table singular group accepts data in the following ways:

[{name: ' username ', value: ' Jresig '}, {name: ' Password ', value: ' Secret '}]

default value: null

Success

callback function that is called after the form has been successfully committed. If the "Success" callback function is provided, it is called when the response is returned from the server. The datatype option value is then determined to return the value of ResponseText or Responsexml.
default value: null

DataType

the type of data expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that specifies how the server's response is handled. This is directly reflected in the Jquery.httpdata method. The following values are supported:

' xml ': if datatype = = ' xml ', the server response will be treated as XML. Also, if the "success" callback method is specified, the Responsexml value is returned.

' JSON ': if datatype = = ' json ', the server response will be evaluated and passed to the ' success ' callback method if it is specified.

' script ': if datatype = = ' script ', the server response will be evaluated as plain text.


default value: null (server returns RESPONSETEXT value)

Semantic

Boolean flag indicating whether data must is submitted in strict semantic order (slower). Note that the normal form serialization was done in semantic order with the exception of input elements of type= "image". You should only set the semantic option to true if your server have strict semantic requirements and your form contains an INPUT element of type= "image".
Boolean flag that indicates whether the data must be strictly in semantic order (slower? ) to commit. Note: In general, forms have been serialized (or serialized) in semantic order, in addition to the INPUT element type= "image". If your server has strict semantic requirements, and the form contains an INPUT element with a type= "image", you should set semantic to true. This paragraph, because it is incomprehensible, may not be translated into words, but please correct. )
Default value: False

Resetform

A Boolean flag that indicates whether the form submission succeeds if it is reset.
Default Value:null

ClearForm

A Boolean flag that indicates whether the form data is purged if the form is submitted successfully.
default value: null

Example:

//Prepare the Options object.
var options = {
target: ' #divToUpdate ',
URL: ' comment.php ',
success:function () {
alert (' Thanks for your comment! ');
} };

//Pass options to Ajaxform
$ (' #myForm '). Ajaxform (options);

Note: The options object can also be used to pass values to the $.ajax method of jquery. If you are familiar with the options supported by $.ajax, you can use them to pass the options object to Ajaxform and Ajaxsubmit.

jquery and Form plugin use