Form form plug-in jquery.form.js

Often used to this plug-in, but the old forget how to use, now to everyone write a certain integration.

Using plug-in instances:

General methods of Use

<!--introduce jquery files--<script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script><script src="Http://malsup.github.com/jquery.form.js"></script><!--Form form--<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>

2. $(function() {
4. var options = {
6. Beforesubmit: showrequest, //Pre-submission process
8. Success: showresponse, //processing complete
10. Resetform: true,
12. DataType: ' json '
14. };
18. $(' #my_form '). Submit(function() {
20. $(this). Ajaxsubmit(options);
22. });
24. });
28. function showrequest(formData, jqform, options) {
30. var uname = $("#uname"). Val();
32. if(uname= ="") {
34. $("#msg"). HTML("name cannot be empty!") ");
36. return false;
38. }
42. var age = $("#age"). Val();
44. if(age= ="") {
46. $("#msg"). HTML("Age cannot be empty!") ");
48. return false;
50. }
52. $("#msg"). HTML("committing ...");
58. return true;
60. }
64. function showresponse(responsetext, statustext) {
66. $("#msg"). HTML(' submit success ');
68. var sex = Responsetext.==1? " Male ":" female "
70. $("#output"). HTML("Name:"+responsetext. uname+"Gender:"+sex+"Age:"+responsetext. Age);
72. }

Options Configuration

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