jquery Plugin-Form form plug-in jquery.form.js

The Query form plugin is an excellent AJAX form plug-in that allows you to upgrade HTML forms easily and without intrusion to support Ajax. The JQuery form has two core methods-Ajaxform () and Ajaxsubmit (), which gather functionality from controlling form elements to deciding how to manage the commit process. In addition, plugins include other methods: Formtoarray (), Formserialize (), Fieldserialize (), Fieldvalue (), ClearForm (), Clearfields (), and Resetform () and so on.

: http://malsup.com/jquery/form/#download

Core methods--ajaxform () and Ajaxsubmit ()

$ (' #myForm '). Ajaxform (function() {      $ (' #output1 '). HTML ("submitted successfully! Welcome to come again next time! "). Show ();    });         $ (' #myForm2 '). Submit (function() {   $ (this). Ajaxsubmit (function  () {         $ (' #output2 '). HTML ("submitted successfully! Welcome to come again next time! "). Show ();       });    return false // block form default submission });

With the two core methods of the form plug-in, you can easily escalate the form's submission to an AJAX submission without modifying the form's HTML code structure.
Both Ajaxform () and Ajaxsubmit () can accept 0 or 1 parameters, which can be either a callback function or an options object when a single parameter is used, and the example above is the callback function, which describes the options object, So that they have more control over the form

varOptions ={target:' #output ',//put the contents returned by the server into an element with ID outputBeforesubmit:showrequest,//Pre-commit callback functionSuccess:showresponse,//Post-Commit callback function   //Url:url,//default is the action of form, if stated, Overrides   //Type:type,//default is form method (get or post), if stated, Overrides   //datatype:null,//html (default), XML, script, JSON ... Accept the type returned by the server   //Clearform:true,//After successful commit, clears the values of all form elements   //Resetform:true,//After successful commit, resets the values of all form elementstimeout: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 Object   varqueryString = $.param (FormData);//name=1&address=2   varFormElement = jqform[0];//convert Jqform to DOM object   varaddress = FormElement.address.value;//accessing the DOM elements of Jqform   return true;//The form will be submitted as long as it does not return false, where the form elements can be validated};functionshowresponse (ResponseText, statustext) {//Datatype=xml   varName = $ (' name ', Responsexml). text (); varAddress = $ (' address ', Responsexml). text (); $("#xmlout"). HTML (name + "" +address); //Datatype=json$ ("#jsonout"). HTML (data.name + "" +data.address);}; $("#myForm"). Ajaxform (options); $ ("#myForm2"). Submit (Funtion () {$ ( This). Ajaxsubmit (options); return false;//Prevent form default submission});

Validation before form submission:  Beforesubmit is called before the form is submitted, and if Beforesubmit returns false, it prevents the form from being submitted

beforesubmit:validatefunctionValidate (FormData, Jqform, options) {//The form is validated here and false to prevent the form from submitting until the rule is met if the rule is not met   //method One: using Formdata parameters    for(vari=0; i < formdata.length; i++) {       if(!formdata[i].value) {Alert (' User name, address and self-introduction are not empty! '); return false; }    }    //Way Two: Using Jqform object   varform = jqform[0];//Convert a form to a DOM object      if(!form.name.value | |!form.address.value) {alert (' User name and address cannot be empty, self introduction can be empty! ‘); return false; }  &nbsp;//Method Three: Using the Fieldvalue () method, Fieldvalue is a form plug-in method that can find the values of the elements in the form, returning a collection.    varUsernamevalue = $ (' input[name=name] '). Fieldvalue (); varAddressvalue = $ (' input[name=address] '). Fieldvalue (); if(!usernamevalue[0] | |!addressvalue[0]) {alert (' User name and address cannot be empty, self introduction can be empty! ‘); return false; }    varqueryString = $.param (FormData);//Assembly Data    //alert (queryString);//similar: name=1&add=2    return true;}

jquery Plugin-Form form plug-in jquery.form.js