form of jquery Plugin

The role of the JQuery.Form.js plugin is to implement an AJAX submission form.

Method:

1.formSerilize () is used to serialize the data in the form and automatically organize it into a URL address format that is appropriate for Ajax asynchronous requests.

2.clearForm () Clears the contents of all the input values in the form.

3.restForm resets all field contents in the form. Returns the fields from all forms to the default value when the page loads.

Question: The difference between ajaxform () and Ajaxsubmit ():

Answer: $ ("#form1"). Ajaxform (); The equivalent of two lines:

$ ("#form1". Submit) (function () {

$ ("#form1"). Ajaxsubmit ();

return false;

})//That is, Ajaxfrom () automatically blocks form submission. and Ajaxsubmit () does not automatically prevent form submission, want to prevent form submission, to return false;

Tip 1: If you want the form to commit without jumping, a simple line of code can be implemented, almost the same as not using a form submission:

$ ("#MailForm"). Ajaxsubmit (function(message) {alert ("form submission succeeded!")　　); });

Note: both Ajaxform () and Ajaxform () can have no parameters or accept 1 parameters. The parameter can be either a callback function or an options object. The object is very powerful, as explained below:

　　　　　

varoptions={url:url,//address of form submission dataType:type,//how form is submitted (Method:post/get)Target:target,//The response data returned by the server is displayed in the element (Id) Number OKBeforesubmit:function(),//callback function executed prior to commitSuccess:function(),//callback function executed after successful commitDataType:NULL,//Server return Data typeClearForm:true,//whether to empty the field values in the form after a successful commitRestform:true,//whether to reset the field values in the form after a successful commit, i.e. revert to the state when the page was loadedTimeout:6000//sets the request time, in milliseconds, to automatically exit the request after that time. }

Example:

Page JS Code:

<script src= "Jquery.1.8.3.js" type= "Text/javascript" ></script> <script src= "JQuery.Form.js" type= " Text/javascript "></script> <script type=" Text/javascript ">        $(function () {            $(": Submit"). Click (function () {                varOptions ={URL:"Indexajax.aspx", Target:"#div2", Success:function() {alert ("Ajax Request Succeeded");                }                }; $("#form1"). Ajaxform (options); })        })    </script>

Page HTML code:

    <div id= "Div1" >        <form id= "Form1" method= "Get" action= "#" >            <p> My Name: <input type= "Text" Name= "name" value= "Please enter content"/></p>            <p> my idol is: <input type= "Radio" name= "Idol" value= "Andy Lau"/> Andy Lau   <input type= "Radio" name= "Idol" value= "Jacky"/> Jacky Cheung </p>            <p> My favorite type of music: <input type= " CheckBox "Name=" Musictype "value=" 1. Rock "> Rock  <input type=" checkbox "Name=" Musictype "value=" 2. Easy "> Soft  <input type= "checkbox" Name= "Musictype" value= "3. Jazz" > Jazz </p>            <p><input type= "Submit" Value= "Confirm"/></p>        </form>    </div>    <div id= "Div2" >    </div>

Backstage: IndexAjax.aspx.cs Code

void Page_Load (object sender, EventArgs e)        {            = request["name"];             = request["Idol"];             = request["Musictype"];            Response.Clear ();            Response.Write ("My name is:" + StrName + ";   My idol is: "+ Stridol +";   I like the type of music: "+ strmusictype);            Response.End ();        }

form of jquery Plugin