Home > Developer > Web Develop
Overview
JQuery Form Plugin allows you to simply upgrade a form submitted in HTML to a form submitted using AJAX technology.
The main methods in the plugin, Ajaxform and Ajaxsubmit, are able to gather information from the form component to determine how to handle the form's submission process.
Two methods support a wide range of optional parameters, allowing you to fully control the submission of data in the form.
Getting Started Guide
Write a form on your page. An ordinary form that does not require any special markup:
<form id= "MyForm" action= "login.action" method= "POST" > Name: <input type= "text" name= "name"/> mailbox: <input Type= "text" name= "email" ><input type= "Submit" value= "Commit"/></form>
<script type= "Text/javascript" src= "js/jquery-1.8.0.min.js" ></script><script type= "Text/javascript "Src=" js/jquery.form.js "></script>$ (function () {$ (' #myForm '). Ajaxform (function () {alert (" Submit success! ");})The user will see a message "Submit success!".
Form Plugin API
The form Plugin API provides a number of useful ways to easily process data and form submissions in a form.
Ajaxform
Preprocess the forms that will be submitted using AJAX, adding all the event listeners that need to be used. It is not submitted to this form.
Use Ajaxform in the Ready function of the page to prepare the Ajax submissions for the forms on your page.
Ajaxform requires 0 or one parameter. The only parameter can be a callback function or an optional parameter object.
$ (' #myFormId '). Ajaxform ();Immediately submit the form via Ajax. The most common use is to invoke a user's action to submit a form when it responds.
Ajaxform requires 0 or one parameter. The only argument can be a callback function or an optional parameter object.
$ (' #myFormId '). Submit (function () {$ (this). Ajaxsubmit (function () {alert ("success!");}); return false; Block form default submission });Serializes a form into a query string. This method returns a string of the form: Name1=value1&name2=value2.
var queryString = $ (' #myFormId '). Formserialize (); $.post (' login.action ', queryString);Resets the form to its original state by invoking a method on the inner dom of the form element.
$ (' #myFormId '). Resetform ();Clears the value of all elements of the form. This method will erase all text boxes, password boxes, text fields, and remove all selected items from the drop-down list.
Leave all check boxes and selected items in the Radio box unchecked.
$ (' #myFormId '). ClearForm ();Optional Parameter Item Object
Both Ajaxform and ajaxsubmit support a large number of optional parameters, which are passed in through an optional parameter item object.
The optional parameter item object is just a simple JavaScript object that contains properties and some values: specific parameters view official website API
code example
The following example shows basic common parameters and how to use a form to submit a callback function before and after.
<body><form id= "MyForm" action= "login.action" method= "POST" > Name: <input type= "text" name= "name"/> </br> Sex: <input type= "Radio" name= "Sex" value= "1" > Male <input type= "Radio" name= "Sex" value= "0" > Female </ br> Email: <input type= "text" name= "email" ></br></br><input type= "Submit" value= "Submit"/> </ Form></body><script type= "Text/javascript" >$ (function () {var options = {beforesubmit:showrequest,// Pre-commit callback Success:showresponse,//After successful callback Clearform:true//After submission succeeds clear all form data//url:url//Overwrite the Action property value in form//type: Type//' get ' or ' post ', overriding the method property value in form//datatype:null//' xml ', ' script ', or ' json '};$ (' #myForm '). Submit (Funct Ion () {$ (this). Ajaxsubmit (options); return false;}) function Showrequest (FormData, Jqform, options) {var queryString = $.param (formData); Console.info (' The submitted data is: ' + queryString); return true;} function Showresponse (responsetext, statustext) {var s = eval ("(" +responsetext+ ")"); Console.info (s); Data returned from the background console.info (statustext);} </script>
Itmyhome
Example: http://download.csdn.net/detail/itmyhome/8374087
jquery form plug-in jquery.form.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
