Home > Developer > JavaScript
Let's talk about the common Form plug-ins, which support Ajax and Ajax File Upload. They are powerful and basically meet the needs of daily applications.
1. download the latest JQuery Framework Package
Jquery. js compressed package
Jquery. js non-compressed package
2. Download Form plug-in
Form. js
3. Getting started with Form plug-ins
Step 1: Add a form first
Code:
Copy codeThe Code is 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 2: Include jquery. js and form. js files
Code:
Copy codeThe Code is as follows:
<Head>
<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>
</Head>
3. Detailed use of the Form plug-in and application examples
Http://www.malsup.com/jquery/form/
======================================
When introducing form. js, the author of this plug-in said the following sentence:
Reference:
Submitting a form with AJAX doesn' t get any easier than this!
It means that it is easier to use Ajax to submit a form. Haha -- whether or not to blow water, you will know when you use it.
Form plug-in API
Http://www.malsup.com/jquery/form/#api.
The form plug-in API provides several methods for you to easily manage form data and submit forms.
AjaxForm
Add all required event listeners to prepare for AJAX submission forms. The ajaxForm cannot be submitted. In the ready function of document, ajaxForm is used to prepare the AJAX submission form. AjaxForm accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Instance:
Code:
Copy codeThe Code is as follows:
$ ('# MyFormId'). ajaxForm ();
AjaxSubmit
AJAX will submit the form immediately. In most cases, ajaxSubmit is called to respond to a user's submitted form. AjaxSubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Instance:
Code:
Copy codeThe Code is as follows:
// Bind the form submission event Processor
$ ('# MyFormId'). submit (function (){
// Submit the form
$ (This). ajaxSubmit ();
// To prevent normal browsers from submitting forms and generating page navigation (to prevent page refreshing ?) Returns false.
Return false;
});
FormSerialize
Serializes (or serializes) A form into a query string. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.
Instance:
Code:
Copy codeThe Code is as follows:
Var queryString = $ ('# myFormId'). formSerialize ();
// You can use $. get, $. post, and $. ajax to submit data.
$. Post ('myscript. php', queryString );
FieldSerialize
Serializes (or serializes) The form field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.
Instance:
Code:
Var queryString = $ ('# myFormId. specialFields'). fieldSerialize ();
FieldValue
Returns the value of the form element that matches the inserted array. From version 0.91, this method will always return data in the form of arrays. If the element value is determined to be invalid, the array is empty; otherwise, it contains one or more element values.
Chainable: No. This method returns an array.
Instance:
Code:
Copy codeThe Code is as follows:
// Obtain 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.
Instance:
Code:
$ ('# MyFormId'). resetForm ();
ClearForm
Clear form elements. In this method, all text input fields, password input fields, and textarea fields are empty to clear the selected fields in any select element, and reset all the single-choice (radio) buttons and multiple-choice (checkbox) buttons to unselected states.
Chainable: Yes.
Code:
$ ('# MyFormId'). clearForm ();
ClearFields
Clear the field element. Only some form elements need to be cleared.
Chainable: Yes.
Code:
$ ('# MyFormId. specialFields'). clearFields ();
Options object
Both ajaxForm and ajaxSubmit support many option parameters, which can be provided using an Options object. Options is just a JavaScript Object that contains the following set of attributes and values:
Target
Specifies the elements on the page that are updated by the server response. The element 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
Method used to submit form data: "GET" or "POST ".
Default Value: The method property value of the form (if not found, the default value is "GET ").
BeforeSubmit
The callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run the pre-commit logic or verify the form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function has three call parameters: form data in the array form, jQuery form object, and Options object in ajaxForm/ajaxSubmit. The form array accepts the following data:
Code:
[{Name: 'username', value: 'jresig'}, {name: 'Password', value: 'secret'}]
Default Value: null
Success
Callback Function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the slave server returns a response. The value of the dataType option determines whether to return the value of responseText or responseXML.
Default Value: null
DataType
Expected data type. Null, xml, script, or json. DataType provides a method that specifies how to process server responses. This is directly reflected in the jQuery. httpData method. The following values are supported:
'Xml': If dataType = 'xml', the server response is treated as xml. If the "success" Callback method is specified, the responseXML value is returned.
'Json': If ype = '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 value is plain text.
(Note: Some of the above are not clear, so you have to translate them in the hope that they can express their original intentions .)
Default Value: null (responseText value returned by the server)
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 shoshould 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 sign, indicating whether data must strictly follow the semantic Order (slower ?) . Note: In general, the form has been serialized (or serialized) in the semantic order, except for the input element of type = "image. If your server has strict semantic requirements and the form contains an input element of type = "image", set semantic to true. Because this paragraph cannot be understood, the translation may not be satisfactory, but please correct it .)
Default Value: false
ResetForm
Boolean flag, indicating whether to reset the form if it 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 the 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 the value to the $. ajax method of jQuery. If you are familiar with the options supported by $. ajax, you can use them to pass Options objects to ajaxForm and ajaxSubmit.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
