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:

var options={

Url:url,//form the address of the submission data

Type:type,//form submission method (Method:post/get)

Target:target,//The response data returned by the server is displayed in the element (Id) Number OK

Beforesubmit:function (),//callback function executed before commit

Success:function (),//callback function executed after successful commit

Datatype:null,//server return data type

Clearform:true,//whether the field values in the form are emptied after successful submission

Restform:true,//whether to reset the field values in the form after a successful commit, i.e. revert to the state when the page was loaded

timeout:6000//Sets the request time, after which the time is exceeded, and the unit (in milliseconds) is automatically exited.

}

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 () {                var options = {                    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

        protected void Page_Load (object sender, EventArgs e)        {            string strName = request["name"];            String stridol = request["Idol"];            String strmusictype = 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