JQuery Form Plugin Detailed

<script src= "Js/jquery.form.js" type= "Text/javascript" ></script>

jquery Form plugin is one of the most important plugins for jquery, leveraging Ajax technology to post forms without causing page refreshes. There are two main methods: Ajaxform and Ajaxsubmit. It automatically collects the contents of the form elements and determines how the submission process is managed. These two methods support multiple selections. I think the Ajax way of form application is no more easy to use than this plugin.

First set up a normal form on the page:
HTML Code Copy Code

1. <form id= "MyForm" action= "comment.php" method= "POST" >
2. Name: <input type= "text" name= "name" id= "name"/>
3. Comment: <textarea name= "comment" id= "comment" ></textarea>
4. <input type= "Submit" value= "Submission of comments"/>
5. </form>
6. [/html]

<form id= "MyForm" action= "comment.php" method= "POST" >
Name: <input type= "text" name= "name" id= "name"/>
Comment: <textarea name= "comment" id= "comment" ></textarea>
<input type= "Submit" value= "Submission of comments"/>
</form>
[/html]

Load the jquery library and the plug-in script library. Then simply write an initialization script that will be executed when the DOM loading is complete:
HTML Code Copy Code

1. 2. <script type= "Text/javascript" src= "jquery.js" ></script>//Load jquery
3. <script type= "Text/javascript" src= "form.js" ></script>//Loading plugins
4. <script type= "Text/javascript" >
5.//DOM is executed after loading
6. $ (document). Ready (function () {
7.//bind ' myForm ' and define a simple callback function
8. $ (' #myForm '). Ajaxform (function () {
9. Alert ("Review submission completed!");
10.});
11.});
</script>
[/html]

<script type= "Text/javascript" src= "jquery.js" ></script>//Loading jquery
<script type= "Text/javascript" src= "form.js" ></script>//Loading plugins
<script type= "Text/javascript" >
Execution of Dom after loading
$ (document). Ready (function () {
Bind ' MyForm ' and define a simple callback function
$ (' #myForm '). Ajaxform (function () {
Alert ("Review submission completed!");
});
});
</script>
[/html]

OK, that's so simple. When the "Submit Comment" button is clicked, the form's data is post to the comment.php script and the "Comment submission complete" message is returned (if the submission is successful). The page is not refreshed, very ajax ...

Let's see what powerful features this plugin has.

Ajaxform

1. The method must be pre-bound to the form, so it is generally in $ (document). Ready (function () {...} defined in the. It enables the form to post to the target without refreshing the page. You can provide a parameter for the method, which is typically a callback function for returning information to the user. Of course, if you do not provide parameters, it is only the table single handle after the silent submission can not be confirmed.

2. Add all the required event listeners to prepare 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:
JS Code Copy Code

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

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

Ajaxsubmit

1. This method submits the form in a general Ajax manner in response to an event. For example, clicking a button or changing the value of a drop-down box allows you to set the method in the trigger event function. Such as:
JS Code Copy Code

1. $ ("#clickme"). Click (function () {
2. $ ("#myForm"). Ajaxsubmit ();
3.});

$ ("#clickme"). Click (function () {
$ ("#myForm"). Ajaxsubmit ();
});

or this:
HTML Code Copy Code

1. <select id= "Myselect" onchange= "$ (' #myForm '). Ajaxsubmit ();" >

<select id= "Myselect" onchange= "$ (' #myForm '). Ajaxsubmit ();" >

2. Submit the form immediately by Ajax. In most cases, ajaxsubmit is called to respond to a user submitting a form. A ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Available links (chainable): Yes.

Instance:
JS Code Copy Code

1.//Bind form Submit event handler
2. $ (' #myFormId '). Submit (function () {
3.//Submit Form
4. $ (this). Ajaxsubmit ();
5.//In order to prevent the normal browser form submission and generate page navigation (Prevent page refresh?) ) returns false
6. return false;
7.});

Binding form Submission Event handler
$ (' #myFormId '). Submit (function () {
Submit Form
$ (this). Ajaxsubmit ();
To prevent the normal browser from making form submissions and generating page navigation (Prevent page refreshes?) ) returns false
return false;
});

Formserialize

1. This method can join the name and value of the form field to form a string, the string format is name1=value1&name2=value2 ... Like what:
JS Code Copy Code

1. Var querystring=$ ("#myForm"). Formserialize ();

var querystring=$ ("#myForm"). Formserialize ();

The value of the variable querystring will be changed to NAME=XXX&COMMENT=XXX. After you get this string, you can use $.post to submit it.

Such as:
JS Code Copy Code

1. $.post ("comment.php", queryString);

$.post ("comment.php", queryString);

2. Serialization (or serialization) of the form into a query string. This method returns a string in the following format: Name1=value1&name2=value2.
can link (chainable): No, this method returns a string.

Instance:
JS Code Copy Code

1. var queryString = $ (' #myFormId '). Formserialize ();
2.
3.//You can now submit data using $.get, $.post, $.ajax, etc.
4. $.post (' myscript.php ', queryString);

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

Data can now be submitted using $.get, $.post, $.ajax, etc.
$.post (' myscript.php ', queryString);

Fieldserialize

1. Like Formserialize, returns a string, but returns a string of the form's specified element or domain of a particular element type. The return string format is the same. such as: var queryString = $ (' #myForm: Text '). Fieldserialize ();//returns the string value of all text boxes within the MyForm form.

2. Serialization (or serialization) of the 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:
JS Code Copy Code

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

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

Fieldvalue

1. Returns an array that records the value of the form element. If the form does not have a value, the corresponding array value is empty. Such as:

JS Code Copy Code

1. Var data=$ (': Text '). Fieldvalue ();//Returns the value of all text box types in all forms.

var data=$ (': Text '). Fieldvalue ();//Returns the value of all text box types in all forms.

The variable data is an array of [",", "] such that the array element corresponds to the value of the form element. In fact, we can get the value in the "Name" text box: Var data=$ ("#name"). Val (); (this element should have an id attribute) does not require the jquery form plug-in to get the value. However, using plug-ins makes it easier to get values for a specific element field in a single or multiple form. For example, get the values of all text boxes or all check boxes. Just add a ":" to it. This method can also be used to formserialize or Fieldserialize methods.
JS Code Copy Code

1. Var data=$ ("#myForm: Text"). Fieldvalue ();//Gets the value of all text boxes in the MyForm form.

var data=$ ("#myForm: Text"). Fieldvalue ();//Gets the value of all text boxes in the MyForm form.

2. 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:
JS Code Copy Code

1.//Get Password input value
2. var value = $ (' #myFormId:p assword '). Fieldvalue ();
3. Alert (' The password is: ' + value[0]);

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

Formtoarray

Also returns an array, an array of objects. The object has a name and value two attributes that record the element names and element values in the form, respectively. Such as:
JS Code Copy Code

1. Var data=$ ("#myForm"). Formtoarray ();

var data=$ ("#myForm"). Formtoarray ();

The variable data gets an array of objects. Data[0].name Save the name attribute value of the first FORM element in the MyForm form, here is "name". Data[0].value Save the value of the first FORM element in the MyForm form, and here is what value is filled in.
Resetform

1. The method is simple and restores the initial state of the form. It reverts to the state of the form when the DOM loading is complete. Similar to "Reset form"

2. Clear the form elements. 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.
JS Code Copy Code

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

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

Clearfields

1. Clear form field elements. You can clear domain elements of a specific type, such as clearing all text boxes, or fields of all check boxes.

2. Clear the field elements. Easy to use only if some form elements need to be cleared.
Available links (chainable): Yes.
JS Code Copy Code

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

$ (' #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

Instance:
JS Code Copy Code

   1.//Prepare Options object    
   2. var options = {   
    3.      target:     ' #divToUpdate ',    
   4.      url:        ' comment.php ',  &NBSP;&NBSP
   5.      success:function () {   
    6.        alert (' Thanks for your comment! ');    
   7.     }};   
   8.    
   9.   //pass options to ajaxform   
  10. $ (' # MyForm '). Ajaxform (options);  

Prepare the Options object.
var options = {
Target: ' #divToUpdate ',
URL: ' comment.php ',
Success:function () {
Alert (' Thanks for your comment! ');
} };

Pass the 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 Form Plugin Detailed