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

Jquery.form.js official website

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.

Through the plug-in, we can easily implement the form of asynchronous submission, and implementation of file upload, progress bar display and so on.

<script type= "Text/javascript" >$(function(){    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 functionResetform:true, DataType:' JSON '//Other available options:        //Url:url//default is the action of form, if stated, Overrides        //Type:type//default is form's method (get or post), if declared, overrides        //datatype:null//html (default), XML, script, JSON ... Accept the type returned by the server        //clearform:true//After a successful commit, clears the values of all form elements        //resetform:true//After a successful commit, resets the values of all form elements         //$.ajax options can used here too, for example:        //timeout:3000////Limit the time of the request, when the request is greater than 3 seconds, jump out of the request    }; //bind to the form ' s submit event$ (' #my_form '). Submit (function() {         $( This). Ajaxsubmit (options); return false;//Prevent form default submission    }); });//Pre-submit Callbackfunctionshowrequest (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    /*var uname = $ ("#uname"). Val (); if (uname== "") {$ ("#msg"). HTML ("Name cannot be empty!")        ");    return false;    } var = $ ("#age"). Val (); if (age== "") {$ ("#msg"). HTML ("Age cannot be empty!")        ");    return false; }*/    $("#msg"). HTML ("Committing ..."); return true; } //Post-submit Callbackfunctionshowresponse (ResponseText, StatusText) {$ ("#msg"). HTML (' Commit successful '); //for normal HTML responses, the first argument to the success callback    //Is the XMLHttpRequest object ' s ResponseText property     //if the Ajaxsubmit method was passed a Options Object with the DataType    //Property set to ' XML ' and the first argument to the success callback    //Is the XMLHttpRequest object ' s Responsexml property     //if the Ajaxsubmit method was passed a Options Object with the DataType    //Property set to ' JSON ' and the first argument to the success callback    //Is the JSON data object returned by the serverAlert (' Status: ' + StatusText + ' \n\nresponsetext: \ n ' + responsetext.msg + ' \n\nthe output div should have already been Updated with the responsetext. '); }</script>

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