Ajax form submission Plugin jquery form

The JQuery form plugin is an excellent AJAX form plug-in, and we can easily use it to manipulate the values of form controls, empty and reset form controls, upload attachments, and complete AJAX form submissions. JQuery form has two core methods Ajaxform () and Ajaxsubmit (), this paper focuses on the application of Ajaxsubmit ().

Html

First we loaded the jquery library and the Jquery.form.js plugin. Jquery.form.js Plugin's website address: http://www.malsup.com/jquery/form/

<script type="text/javascript" src="jquery.js"></ script> <script type="text/javascript" src="Jquery.form.min.js "

We then add a simple form code to the body of the page:

<form id="My_form"action="submit.php"Method="Post"> <p> Name: <input type="text"Name="uname"Id="uname" class="input"></p> <p> Gender: <input type="Radio"Name="Sex"Value="1" checked> Male <input type="Radio"Name="Sex"value="2"> Women </p> <p> Age: <input type="text"Name=" Age"Id=" Age" class="input"style="width:50px"></p> <p style="margin-left:30px"><input type="Submit" class="btn"Value="Submit"> <span id="msg"></span></p> </form> <div id="Output"></div>

form, you are asked to enter your name, gender, and age, and then submit it to submit.php processing, usually by clicking the "Submit" button, The page goes to submit.php to process the form data, and when we use the Jquery.form plugin, the page does not jump and completes an AJAX interaction directly.

Jquery

It is convenient to call the Jquery.form plug-in and use Ajaxsubmit () to make the entire form's AJAX submission process very simple.

$ (function () {varOptions ={beforesubmit:showrequest,//Pre-submission processingSuccess:showresponse,//Processing CompleteResetform:true, DataType:'JSON'      }; $('#my_form'). Submit (function () {$ ( This). Ajaxsubmit (options);  });  }); function Showrequest (FormData, Jqform, options) {varuname = $ ("#uname"). Val (); if(uname==""){         $("#msg"). HTML ("the name cannot be empty! "); return false; }          varAge = $ ("#age"). Val (); if(age==""){         $("#msg"). HTML ("age cannot be empty! "); return false; }     $("#msg"). HTML ("submitting ..."); return true; } function Showresponse (ResponseText, StatusText) {$ ("#msg"). HTML ('Submit Success'); varSex = responsetext.sex==1?"male":"female"; $("#output"). HTML ("Name:"+responsetext.uname+"Gender:"+sex+"Age:"+responsetext.age); }  

The above code completes the validation of the form before submission and the processing after submission. After the form data is submitted to submit.php, we can detect the data by submit.php, write the data to the database, return the operation result and so on according to the actual situation, this article no longer lists the code.

Ajaxsubmit () option setting

Ajaxsubmit () provides a rich set of options, which we use to make a list of possible sizes for reference.

Property	Describe
Url	The AJAX request will be submitted to the URL, which defaults to the form's Action property value
Type	Specifies the method by which the form data is submitted: "GET" or "POST". Default value: The Method property value of the form (if no default is found for "GET").
DataType	The type of data expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that specifies how the server's response is handled. This is directly reflected in the Jquery.httpdata method. The following values are supported: ' XML ': if datatype = = ' xml ', the server response will be treated as XML. Also, if the "success" callback method is specified, the Responsexml value is returned. ' JSON ': if datatype = = ' json ', the server response will be evaluated and passed to the ' success ' callback method if it is specified. ' Script ': if datatype = = ' script ', the server response will be evaluated as plain text. Default value: null (server returns RESPONSETEXT value)
Target	Indicates the element in the page that is updated by the server response. The value of the element may be specified as a jquery selector string, a jquery object, or a DOM element. Default value: null.
Beforesubmit	The callback function that was called before the form was submitted. The "Beforesubmit" callback function is provided as a hook to run the pre-commit logic or to validate the form data. If the "Beforesubmit" callback function returns false, the form will not be committed. The "Beforesubmit" callback function has three invocation parameters: form data in array form, jquery form objects, and options objects in the incoming ajaxform/ajaxsubmit. Default value: null
Success	callback function that is called after the form has been successfully committed. If the "Success" callback function is provided, it is called when the response is returned from the server. The datatype option value is then determined to return the value of ResponseText or Responsexml. Default value: null
ClearForm	Indicates whether the form data is purged if the form submission succeeds. Default value: null
Resetform	Indicates whether the form submission succeeds if it is reset. Default value: null

The Jquery.form plugin also provides Formtoarray (), Formserialize (), Fieldserialize (), Fieldvalue (), ClearForm (), Clearfields (), and Resetform () and other methods. Usually we can use the form validation plug-in with the Jquery.form plugin for better results.

Code: here

Ajax form submission Plugin jquery form