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

The JQuery 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 ()

[JavaScript]View PlainCopyPrint?

2. $ (' #myForm '). Ajaxform (function() {
4. $ (' #output1 '). html ("submit successfully! Welcome to come again next time!      "). Show ();
6. });
10. $ (' #myForm2 '). Submit (function() {
12. $ (this). Ajaxsubmit (function() {
14. $ (' #output2 '). html ("submit successfully! Welcome to come again next time!      "). Show ();
16. });
18. return false; //Block form default submission   
20. });

$ (' #myForm '). Ajaxform (function () {      $ (' #output1 '). HTML ("submitted successfully! Welcome to come again next time! "). Show ();    });         $ (' #myForm2 '). Submit (function () {   $ (this). Ajaxsubmit (function () {         $ (' #output2 '). HTML ("Submit succeeded!"). 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

[JavaScript]View PlainCopyPrint?

2. var options = {
4. Target: ' #output ', //Put the contents returned by the server into an element with ID output
6. Beforesubmit:showrequest, //Pre-commit callback function
8. Success:showresponse, //post-commit callback function
10. //url:url,//default is the action of form, if stated, Overrides   
12. //type:type,//default is form method (get or post), if stated, Overrides   
14. //datatype:null,//html (default), XML, script, JSON ... Accept the type returned by the server
16. //clearform:true,//After successful commit, clears the values of all form elements   
18. //resetform:true,//After successful commit, resets the values of all form elements   
20. timeout:3000 //Limit the request time, when the request is greater than 3 seconds, jump out of the request
22. }
26. function showrequest (FormData, Jqform, options) {
28. //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}]   
30. //jqform:jquery object that encapsulates the elements of the form   
32. //options:options Object   
34. var   queryString = $.param (FormData); //name=1&address=2
36. var              formelement = jqform[0]; //Convert Jqform to DOM object
38. var  address = FormElement.address.value; //Access DOM elements of Jqform
40. return   true; //The form will be submitted, as long as it does not return false, where the form elements can be validated
42. };
46. function showresponse (ResponseText, statustext) {
48. //datatype=xml   
50. var  name = $ (' name ', responsexml). text ();
52. var  address = $ (' address ', responsexml). text ();
54. $ ("#xmlout"). HTML (name + "" + address);
56. //datatype=json   
58. $ ("#jsonout"). html (data.name + "" + data.address);
60. };
64. $ ("#myForm"). Ajaxform (options);
68. $ ("#myForm2"). Submit (Funtion () {
70. $ (this). Ajaxsubmit (options);
72. return    false; //block form default submission
74. });

var options = {target: ' #output ',//Put the contents of the server back into an element with ID output beforesubmit:showrequest,//Pre-commit callback function Su               Ccess:showresponse,//post-commit callback function//url:url,//default is the action of form, if declared, will overwrite//type:type, The default is form's method (get or post), if stated, overwrites//datatype:null,//html (default), XML, script, JSON ... Accepts the type//clearform:true returned by the server,//After successful commit, clears the value of all form elements//resetform:true,//After successful commit, resets the values of all form elements timeout:30 00//Limit the request time, when the request is greater than 3 seconds, jump out of the request}function Showrequest (FormData, Jqform, Options) {//formdata: Array object, when the form is submitted, the form plug-in will The data is automatically submitted in AJAX format, such as: [{name:user,value:val},{name:pwd,value:pwd}]//jqform:jquery object, which 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 the DOM element of Jqform return true; As long as you do not return false, the form will be submitted, where the form elements can be verified};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});

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

[JavaScript]View PlainCopyPrint?

2. Beforesubmit:validate
4. function Validate (FormData, Jqform, options) { //To validate the form here, and false to prevent the form from submitting until the rule is met if the rule is not met
6. //Mode one: using Formdata parameters   
8. for (var i=0; i < formdata.length; i++) {
10. if (!formdata[i].value) {
12. Alert (' username, address and self-introduction cannot be empty! ' )  );
14. return   false;
16. }
18. }
22. //Mode two: Using Jqform object   
24. var form = jqform[0]; //Convert form to DOM object   
26. if (!form.name.value | |!form.address.value) {
28. Alert (' username and address cannot be empty, self-introduction can be empty!  ');
30. return   false;
32. }
36. //Way three: Using the Fieldvalue () method, Fieldvalue is a form plug-in method that can find the values of elements in a form and return a collection.   
38. var  Usernamevalue = $ (' input[name=name] '). Fieldvalue ();
40. var  Addressvalue = $ (' input[name=address] '). Fieldvalue ();
42. if (!usernamevalue[0] | |!addressvalue[0]) {
44. Alert (' username and address cannot be empty, self-introduction can be empty!  ');
46. return   false;
48. }
52. var queryString = $.param (formData); //Assembly data   
54. //alert (queryString);//similar: name=1&add=2   
56. return   true;
58. }

Beforesubmit:validatefunction Validate (FormData, Jqform, Options) {//To validate the form here, and false to prevent the form from submitting until the rule is met if the rule is not met   //Mode one: Use the FormData parameter   for (var i=0; i < formdata.length; i++) {       if (!formdata[i].value) {            alert (' User name, Address and self-introduction are not empty! ');            return false;        }    }    Mode two: Use Jqform object   var form = jqform[0];//Convert form to DOM object      if (!form.name.value | |!form.address.value) {            alert (' User name and address cannot be empty, self-introduction can be empty! ');            return false;      }  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.   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 to: name=1&add=2      return true;}

JQuery plugin-form form plug-in jquery.form.js