Jquery submission form Form.js official plug-in introduction_jquery

Let’s first talk about the commonly used Form plug-ins, which support Ajax and Ajax file upload. They are powerful and can basically meet daily applications.
1. Download the latest JQuery framework software package
jquery.js compressed package
jquery.js non-compressed package
2. Download the Form plug-in
form.js

3. A simple introduction to the Form plug-in
Step 1: Add a form
Code:

Copy the code The code is as follows:

Name:
Comment:

Step 2: Include the jquery.js and form.js files
code:

Copy code The code is as follows:

3. Detailed usage and application examples of the Form plug-in
http://www.malsup.com/jquery/form/
＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
The author of this plug-in said this when introducing form.js:
Quote:
Submitting a form with AJAX doesn't get any easier than this!
It means that you can't get any easier than this when using Ajax to submit a form. Haha——, whether it blows water or not, you will know after using it.

Form plug-in API

English original text: http://www.malsup.com/jquery/form/#api
The form plug-in API provides several methods to allow you to easily manage Form data and making form submissions.
ajaxForm
Add all required event listeners to prepare the form for AJAX submission. ajaxForm cannot submit the form. In the document's ready function, use ajaxForm to prepare for AJAX submission of the form. ajaxForm accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:

Copy code The code is as follows:

$( '#myFormId').ajaxForm();
ajaxSubmit

The form will be submitted by AJAX immediately. In most cases, ajaxSubmit is called to respond to the user submitting the form. ajaxSubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:

Copy code The code is as follows:

// Bind the form submission event handler
$('#myFormId').submit(function() {
// Submit the form
$(this).ajaxSubmit();
// In order to prevent Ordinary browsers perform form submission and generate page navigation (prevent page refresh?) return false
return false;
});
formSerialize

Serialize the form (or serialized) into a query string. This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:

Copy code The code is as follows:

var queryString = $('#myFormId').formSerialize();
// Now you can use $.get, $.post, $.ajax, etc. to submit data
$.post('myscript.php', queryString );
fieldSerialize

Serialize (or serialize) the form's field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized). This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the form element value that matches the inserted array. As of version 0.91, this method will always return data as an array. If the element value is judged to be potentially invalid, the array is empty, otherwise it contains one or more element values.
Chainable: No, this method returns an array.
Example:
Code:

Copy code The code is as follows:

// Get the password input value
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' value[0]);
resetForm

Restore the form to its initial state by calling the original DOM method of the form element.
Chainable: Yes.
Example:
Code:
$('#myFormId').resetForm();
clearForm
Clear the form element. This method clears all text input fields, password input fields, and textarea fields, clears the selection in any select elements, and clears all radio buttons and multi-selects. (checkbox) button resets to its unselected state.
Chainable: Yes.
Code:
$('#myFormId').clearForm();
clearFields
Clear field elements. It is convenient to use only when some form elements need to be cleared.
Chainable: Yes.
Code:
$('#myFormId .specialFields').clearFields();
Options object
Both ajaxForm and ajaxSubmit support numerous option parameters, which can be provided using an Options object . Options is just a JavaScript object, which contains the following collection of attributes and values:
target
indicates the element in the page that is updated by the server response. The element's value may be specified as a jQuery selector string, a jQuery object, or a DOM element.
Default value: null.
url
Specifies the URL for submitting form data.
Default value: the action attribute value of the form
type
Specifies the method for submitting form data: "GET" or "POST".
Default value: The method attribute value of the form (defaults to "GET" if not found).
beforeSubmit
Callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run pre-submit logic or validate form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function takes three calling parameters: form data in the form of an array, jQuery form object, and the Options object passed in ajaxForm/ajaxSubmit. The form array accepts data in the following manner:
Code:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
Default value :null
success
Callback function called after the form is successfully submitted. If a "success" callback function is provided, it is called when the response is returned from the server. Then the dataType option value determines whether the value of responseText or responseXML is returned.
Default value: null
dataType
The data type expected to be returned. One of null, "xml", "script" or "json". dataType provides a method that specifies how to handle the server's response. This is reflected directly into the jQuery.httpData method. The following values ​​are supported:
'xml': If dataType == 'xml', the server response will be treated as XML. At the same time, if the "success" callback method is specified, the responseXML value will be 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 evaluate to plain text.
(Annotation: Some of the places above were not clear, so I had to paraphrase them, hoping to express the original meaning.)
Default value: null (the server returns the responseText value)
semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is 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 has strict semantic requirements and your form contains an input element of type="image".
Boolean flag indicating whether the data must be submitted in strict semantic order (slower?). Note: Generally speaking, forms are serialized (or serialized) in semantic order, except for input elements of type="image". If your server has strict semantic requirements and the form contains an input element of type="image", you should set semantic to true. (Translation note: Because this paragraph is incomprehensible, the translation may not be clear, but please correct me.)
Default value: false
resetForm
Boolean flag, indicating whether to reset if the form is submitted successfully.
Default value: null
clearForm
Boolean flag, indicating whether to clear the form data if the form is submitted successfully.
Default value: null
Instance:
Code:
[/code]
// Prepare Options object
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// Pass options to ajaxForm
$('#myForm').ajaxForm(options);
[/code]
Note: The Options object can also be used to pass values ​​to jQuery’s $.ajax method. If you are familiar with the options supported by $.ajax, you can use them to pass Options objects to ajaxForm and ajaxSubmit.