Quick Learning jquery Plug-in Form form plug-in use method _jquery

The JQuery form plug-in is an excellent AJAX form plug-in that can be easily and without intrusion to upgrade HTML forms to support Ajax. The JQuery form has two core methods--ajaxform () and Ajaxsubmit ()--that gather functionality from controlling form elements to deciding how to manage the commit process. In addition, Plug-ins include other methods: Formtoarray (), Formserialize (), Fieldserialize (), Fieldvalue (), ClearForm (), Clearfields (), and Resetform () and so on.
Core approach-- ajaxform () and ajaxsubmit ()

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

Through the two core methods of the form plug-in, can easily upgrade form submission to AJAX submissions without modifying the form's HTML code structure, Ajaxform () and Ajaxsubmit () can accept 0 or 1 parameters, and when a single argument is This parameter can be either a callback function or a options object, and The example above is a callback function , which describes the options object so that they have more control over the form:

var options = {target: ' #output ',///Beforesubmit:showrequest The return of the server into an element with an ID of output,//The callback function before committing Success:sho Wresponse,///Post callback function//url:url,//default is form action, if stated, will overwrite//type:type,//default is form method (get or post), if stated , you will overwrite//datatype:null,//html (default), XML, script, JSON ... Accept the type//clearform:true returned by the server,///////////////After successful submission, clear all form element values//resetform:true,////When the value of all form elements is reset timeout:3000//Limit requests , when the request is greater than 3 seconds, the jump request} function Showrequest (FormData, Jqform, Options) {//formdata: Array object, when submitting the form, the form plug-in automatically submits the data in an AJAX manner, in a format such as : [{name:user,value:val},{name:pwd,value:pwd}]//jqform:jquery object that encapsulates the elements of the form//options:options object var querystring = $ . param (FormData);    name=1&address=2 var formelement = jqform[0]; Convert Jqform to DOM object var address = FormElement.address.value; Access to Jqform DOM element return true; 
 
As long as you do not return false, the form will be submitted, where you can validate the form elements}; 
 function Showresponse (responsetext, statustext) {//datatype=xml var name = $ (' name ', responsexml). text (); var addrESS = $ (' 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; 
 Block form default submission});

Before the form is submitted for verification: Beforesubmit is invoked before the form is submitted, and if Beforesubmit returns False, the form is blocked from submitting

Beforesubmit:validate 
function Validate (FormData, Jqform, Options) {//The form is validated here and false to prevent form submission if the rule is not met. Until the rule is met 
 //mode one: use formData parameter for 
 (var i=0 i < formdata.length; i++) { 
  if (!formdata[i].value) { 
   Alert (' Username, address and self-introduction cannot be empty! '); 
   return false; 
  } 
 } 
 
 Mode two: Using the Jqform object 
 var form = jqform[0];//converting the form to DOM object 
  if (!form.name.value | |!form.address.value) { 
   Alert (' username and address cannot be empty, self-introduction can be empty! '); 
   return false; 
  } 
 
 Mode three: Using the Fieldvalue () method, Fieldvalue is a method of the form plug-in that finds the value of the elements in the form and returns a collection. 
 var usernamevalue = $ (' input[name=name] '). Fieldvalue (); 
 var addressvalue = $ (' input[name=address] '). Fieldvalue (); 
 if (!usernamevalue[0] | |!addressvalue[0]) { 
  alert (' username and address cannot be empty, self-introduction can be empty!) '); 
  return false; 
 } 
 
 var querystring = $.param (FormData); Assembly Data 
 //alert (querystring);//similar: name=1&add=2 return 
 true; 
} 

The article introduced the form Forms form plug-in's use method in detail, hoped everybody earnest study, obtains the harvest.