The use of JQuery.Form.js

Source: Internet
Author: User

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


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:

$ ("#frm1"). 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.



Page JS Code:

<script src= "Jquery.1.10.1.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 ",                    type:" Post ",                    Success:function () {                        alert ("Success");}                ;                $ ("#frm1"). Ajaxform (options);            })        })    </script>
Page HTML code:
     <div id= "Div1" >        <form id= "Form1" action= "#" >            <p> My Name: <input type= "text" name= "name" Value= "Please enter content"/></p>            <p> My hobby: <input type= "Radio" name= "Idol" value= "Play games"/> Play games   
                       <input type= "Radio" name= "Idol" value= "Write code"/> Write code </p>            <p> my forte: <input type= "checkbox" Name= " Musictype "value=" ">java  
                       <input type= "checkbox" Name= "Musictype" value= "2.c#" >c#  
                       <input type= "checkbox" Name= "Musictype" value= "3.ios" >ios</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 hobby is: "+ Stridol +";   I am good at: "+ strmusictype);            Response.End ();        }

The use of JQuery.Form.js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.