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. });

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. });

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. }

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