Home > Developer > Web Develop
JQuery.form.js is a form plugin that supports AJAX form submissions and Ajax file uploads.
1<!DOCTYPE html>23<Html>4<Head>5<MetaName= "Viewport"Content= "Width=device-width"/>6<Title>index</Title>7<ScriptSrc= "~/scripts/jquery-1.6.2.js"></Script>8<ScriptSrc= "~/scripts/jquery.form.js"></Script>9</Head>10<Body>11<Div>12<FormId= "Ajaxform"Method= "POST"Action= "/home/index"Enctype= "Multipart/form-data">13<InputType= "Text"Name= "Name"/>14<InputType= "Text"Name= "Sex"/>15<InputType= "File"Name= "File"/>16<buttonType= "Submit"Id= "Btnsubmit"> Submit 1</button>17</Form>18<buttonId= "Btnbutton"Type= "button"> Submit 2</button>19</Div>20<ScriptType= "Text/javascript">21st$(function() {22$("#ajaxForm"). Ajaxform (function() {23Alert"Submit Success 1");24});25$("#ajaxForm"). Submit (function() {26$(This). Ajaxsubmit (function() {27Alert"Submit Success 1");28});29ReturnFalse;30});31 $ ( #btnButton ). Click ( () {32 $ ( " #ajaxForm ). Ajaxsubmit (function () { 33 alert ( " submit success 2
Api
| 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. | accepts 0 or 1 parameters. A parameter can be a callback function, or it can be an options object. | $ ("#formid"). Ajaxform (); |
| Ajaxsubmit | Submit a form using AJAX. | accepts 0 or 1 parameters. A parameter can be a callback function, or it can be an options object. | $ ("#formid"). Ajaxsubmit (); Or $ ("#formid"). Submit (function () { $ (this). Ajaxsubmit (); return false; }); |
| Formserialize | Serializes (or serialize) a form into a query string. This method returns a string in the following format: Name1=value1&name2=value2. | No | $ ("#formid"). Formserialize (); |
| Fieldserialize | Serializes (or serialize) the field elements of a form into a single query string. This is handy when only a subset of the form fields need to be serialized (or serializable). Returns a string in the following format: Name=value1&name2=value2. | No | $ ("#formid. Specialfields"). Fieldserialize (); |
| Fieldvalue | Returns the value of the form element that matches the inserted array. The method returns data in the form of an array. If the element value is determined to be invalid, the array is empty. | No | $ ("#formid:p assword"). Fieldvalue (); |
| Resetform | Restores the form to its original state. | No | $ ("#formid"). Resetform (); |
| ClearForm | Clears the form element. This method resets all text, password, textarea, clears the selection in the Select element, and resets all radio and CheckBox buttons to the unselected state. | No | $ ("#formid"). ClearForm (); |
| Clearfields | Clears the field element. Only some form elements are easy to use when they need to be cleared. | No | $ ("#formid. Specialfields"). Clearfields (); |
Options Object
Both Ajaxform and Ajaxsubmit support a wide range of option parameters, which can be provided using an options object.
| 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, and a DOM element. | default value: null |
| URL | Specifies the URL to submit the form data. | Default: The Action property value of the form |
| type | Specifies the method by which the form data is submitted: "GET" or "POST". | default: Get |
| beforesubmit | The callback function that was called before the form was submitted. If the callback function returns false, the form will not be committed. The callback function takes three invocation parameters: the form data as an array, the JQuery form object, and the options object in the incoming ajaxform/ajaxsubmit. | default: null |
| Success | The callback function that was called after the form was successfully committed. The datatype option value then determines whether to return ResponseText or responsexml values. | default: null |
| dataType | One of the data types returned: null, XML, script, JSON. | default value: null |
| resetform | Indicates whether the form submission succeeds if it is reset. | default: null |
| clearform | Indicates whether form data is purged if the form is submitted successfully. | default value: null |
var options={target: ' #output ',//Beforesubmit:showrequest the contents returned by the server into an element with an ID of output.//Pre-commit callback function Success:showresponse,//Post-Commit callback function//Url:url,//default is the action of form, if stated, Overrides//Type:type,//The default value is the method of form ("GET" or "POST"), and if declared, overrides//Datatype:null,//html (default), XML, script, JSON accept server-side returned types//Clearform:true,//After successful commit, clears the values of all form elements//Resetform:true,//After a successful commit, resets the values of all form elements timeout:3000//Limit the time of the request, when the request is greater than 3 seconds, jump out of the request}functionShowrequest (FormData, Jqform, options) {//FormData: An Array object, when the form is submitted, the form plug-in automatically submits the data in an AJAX format such as [{NAME:USER,VALUE:VAL},{NAME:PWD,VALUE:PWD}]//Jqform:jquery object that encapsulates the elements of the form//Options:options Objectvar querystring=$.param (FormData);//name=1&address=2var formelement=jqform[0];//Convert Jqform to DOM objectvar Address=formelement.address.value;// access Jqform DOM element return //}function Showresponse (responsetext,statustext) { Span style= "color: #008000;" >// Datatype=xml var name=$ ("name" ,responsexml). text (); var address=$ ("Address" ,responsexml). Text (); $ ("# Xmlout "). HTML (name+" "+address"); // Datatype=json $ ("#jsonout"). HTML (data.name+ "" +< Span style= "color: #000000;" >data.address)}
Copyright information: http://www.cnblogs.com/sydeveloper/p/3754637.html (EXT)
JQuery.form.js use
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
