jquery Plug-in JQuery.Form.js Usage example analysis (with demo sample source code) _jquery

This example describes the JQuery.Form.js usage of the jquery plug-in. Share to everyone for your reference, specific as follows:

The role of JQuery.Form.js Plug-ins is to implement the AJAX submission form.

Method:

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

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

3.restForm resets all field contents in the form. Restores the fields in all forms to the default values when the page is loaded.

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

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

$ ("#form1". Submit) (function () {
 $ ("#form1"). Ajaxsubmit ();
return false;
})

This means that Ajaxfrom () automatically blocks form submissions. The Ajaxsubmit () does not automatically block form submissions and wants to prevent form submissions and return false.

Tip 1: If you want the form submission to complete without jumping, then a single line of code can be implemented, almost as if you were not using the form submission:

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

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

var options={
 Url:url,//form submit data address
 Type:type,//form submitted by way of (Method:post/get)
 target:target,// The response data returned by the server is displayed in the element (ID) number to determine
 beforesubmit:function (), the callback function executed before//commit
 success:function (),///////////////////////
 Datatype:null,//server returns data type
 Clearform:true,///If the field value in the form is emptied after successful
 restform:true,///If the field values in the form are reset after the commit is successful, That is, the state timeout:6000//Set request time when the page is loaded, and the
 request is automatically withdrawn, in milliseconds, 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 () {
    var options = {
      URL:" indexajax.aspx ",
      target:" #div2 ",
      success:function () {
        alert ("Successful AJAX Request");
      }
    ;
    $ ("#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"/></p>
  <p> my idol is: <input type= "Radio" name= "Idol" value= "Andy Lau"/> Andy Lau  <input type= "Radio" name= "Idol" value= "Jacky Cheung"/> 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= "Confirmation"/> </p>
</form>
</div>
<div id= "Div2" >
</div>

Background: 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 ();
}

Sample code Click here to download the site.

more on the jquery plug-in usage can also refer to the site Related topics : "jquery common Plug-ins and usage summary."

I hope this article will help you with the jquery program design.