First talk about the commonly used form plug-ins, support Ajax, support Ajax file upload, powerful, basic to meet day-to-day applications.
1, the latest jquery framework package download
Jquery.js Compression Package
Jquery.js Non-compressed package
2. Form plugin Download
Form.js
3, Form plug-in simple introduction
First step: Add a form first
Code:
Copy Code code as follows:
<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
Code:
Copy Code code as follows:
<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 for Your comment!");
});
});
</script>
3, Form plug-in detailed use method and application example
http://www.malsup.com/jquery/form/
============================
The plugin's author, when introducing Form.js, said the following sentence:
Reference:
Submitting a form with AJAX doesn ' t get any easier than this!
It means that using AJAX to submit a form, you can't find it any easier than this. Oh--whether to blow water, we used to know.
Form Plug-in API
Original English: 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 event listeners you need to prepare your form for AJAX submission. Ajaxform cannot submit a form. In the ready function of document, use Ajaxform to prepare the form for AJAX submission. Ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.
can link (chainable): OK.
Instance:
Code:
Copy Code code as follows:
$ (' #myFormId '). Ajaxform ();
Ajaxsubmit
Immediately submit the form by Ajax. In most cases, you call Ajaxsubmit to respond to a user submitting a form. Ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.
can link (chainable): OK.
Instance:
Code:
Copy Code code as follows:
Bind form Submit event handler
$ (' #myFormId '). Submit (function () {
Submitting a form
$ (this). Ajaxsubmit ();
To prevent form submission and page navigation from normal browsers (Prevent page refreshes?) ) returns false
return false;
});
Formserialize
Serialize (or serialize) the form into a single 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:
Code:
Copy Code code as follows:
var querystring = $ (' #myFormId '). Formserialize ();
You can now submit data using $.get, $.post, $.ajax, etc.
$.post (' myscript.php ', querystring);
Fieldserialize
Serialize (or serialize) the field elements of the form 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:
Code:
var querystring = $ (' #myFormId. Specialfields '). Fieldserialize ();
Fieldvalue
Returns the form element values that match the inserted array. From version 0.91, the method will always return data as an array. If the element value is determined to be invalid, the array is empty, otherwise it will contain one or more element values.
can link (chainable): cannot, this method returns an array.
Instance:
Code:
Copy Code code as follows:
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.
can link (chainable): OK.
Instance:
Code:
$ (' #myFormId '). Resetform ();
ClearForm
Clears the form element. The method password all text input fields, password () input fields, and text area (textarea) fields, clearing the selection in any SELECT element. and resets all radio (radio) and multiple-selection (checkbox) buttons to an unselected state.
can link (chainable): OK.
Code:
$ (' #myFormId '). ClearForm ();
Clearfields
Clears the field element. It is only convenient to use if some form elements need to be cleared.
can link (chainable): OK.
Code:
$ (' #myFormId. Specialfields '). Clearfields ();
Options Object
Both Ajaxform and Ajaxsubmit support a wide range of option parameters that can be provided using a 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 an element may be specified as a jquery selector string, a jquery object, or a DOM element.
Default value: null.
Url
Specifies the URL that submits the form data.
Default value: Form's Action property value
Type
Specifies the method that submits the form data: "Get" or "POST."
Default value: The form's Method property value (if the default is "get" is not found).
Beforesubmit
The callback function that was invoked before the form was submitted. The "Beforesubmit" callback function is provided as a hook (hook) to run the pre-submit logic or validate the form data. If the "Beforesubmit" callback function returns false, then the form will not be submitted. The "Beforesubmit" callback function takes three call parameters: Form data in array form, jquery Form object, and the options object in the incoming ajaxform/ajaxsubmit. The form singular group accepts data in the following ways:
Code:
[{name: ' username ', value: ' Jresig '}, {name: ' Password ', value: ' Secret '}]
Default value: null
Success
callback function that is invoked after a form has been successfully submitted. If a "success" callback function is provided, it is invoked 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 data type expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that provides a way to handle the response of a server. 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 is 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.
In some places above the ghost said not clear, had to paraphrase, hoping to express the original intention. ）
Default value: null (server returns RESPONSETEXT value)
Semantic
The Boolean flag indicating whether data must is submitted in strict the order (semantic). The "normal" form serialization is the semantic order with the exception of input elements of type= "image". Should only set the semantic option to TRUE if your server has strict semantic requirements and your form contains INPUT element of type= "image".
Boolean flags that indicate whether data must be strictly in semantic order (slower?). ) for submission. Note: In general, the form has been serialized (or serialized) in a semantic order, except for the type= "image" INPUT element. If your server has strict semantic requirements, and the form contains an INPUT element with a type= "image", you should set the semantic to true. This passage cannot be understood, the translation may not express language, but please make corrections. ）
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 submission succeeds.
Default value: null
Instance:
Code:
[/code]
Prepare the Options object.
var options = {
Target: ' #divToUpdate ',
URL: ' comment.php ',
Success:function () {
Alert (' for your comment! ');
} };
Pass the options to Ajaxform
$ (' #myForm '). Ajaxform (options);
[/code]
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.
