jQuery plugin -- Form form plugin jquery.form.js

The jQuery Form plugin is an excellent Ajax form plugin that can easily and non-invasively upgrade HTML forms to support Ajax. jQuery Form has two core methods - ajaxForm() and ajaxSubmit(), which aggregate functionality from controlling form elements to deciding how to manage the submission process. In addition, the plugin also includes some other methods: formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() and resetForm(), etc.

Download address: http://malsup.com/jquery/form/#download

Core methods -- ajaxForm() and ajaxSubmit()

[javascript] view plain copy

print ?

1. $('#myForm').ajaxForm(function() {     
2.    $( '#output1' ).html( "Successful submission! Welcome next time!" ).show();      
3. });    
4.          
5. $('#myForm2').submit(function() {  
6.    $(this).ajaxSubmit(function() {     
7.       $( '#output2' ).html( "Successful submission! Welcome next time!" ).show();      
8.    });  
9.    return false ;  // prevent the form from submitting by default   
10. });  

$('#myForm').ajaxForm(function() { $('#output1').html("Submission is successful! Welcome next time!").show(); }); $('#myForm2') .submit(function() { $(this).ajaxSubmit(function() { $('#output2').html("Submitted successfully! Welcome next time!").show(); }); return false; // prevent the form from submitting by default });

Through the two core methods of the Form plugin, you can easily upgrade the form submission method to Ajax submission method without modifying the HTML code structure of the form. Both
ajaxForm() and ajaxSubmit() can accept 0 or 1 Parameter, when it is a single parameter, the parameter can be either a callback function or an options object. The above example is a callback function. The options object is introduced below so that they have more control over the form.

[javascript] view plain copy

print ?

1. var  options = {  
2.    target:  '#output' ,           // put the content returned by the server into the element whose id is output      
3.    beforeSubmit: showRequest,   //Callback function before submission  
4.    success: showResponse,       //callback function after submission  
5.    //url: url, //The default is the action of the form, if it is declared, it will be overwritten  
6.    //type: type, //The default is the form's method (get or post), if it is declared, it will be overwritten  
7.    //dataType: null, //html (default), xml, script, json... accept the type returned by the server  
8.    //clearForm: true, //After successful submission, clear the value of all form elements  
9.    //resetForm: true, //After successful submission, reset the value of all form elements  
10.    timeout: 3000                //limit the time of the request, when the request is greater than 3 seconds, the request will be jumped out  
11. }  
12.   
13. function showRequest(formData, jqForm, options){  
14.    //formData: Array object, when submitting the form, the Form plugin will automatically submit the data in Ajax mode, the format is: [{name:user,value:val},{name:pwd,value:pwd}]  
15.    //jqForm: jQuery object, which encapsulates the elements of the form     
16.    //options: options object  
17.    var queryString = $.param(formData);   //name=1&address=2  
18.    var  formElement = jqForm[0];               //Convert jqForm to DOM object  
19.    var  address = formElement.address.value;   //Access the DOM element of jqForm  
20.    return true ;   //As long as false is not returned, the form will be submitted, and the form elements can be validated here   
21. };  
22.   
23. function showResponse(responseText, statusText){  
24.    //dataType=xml  
25.    var name = $('name', responseXML).text();  
26.    var address = $('address', responseXML).text();  
27.    $("#xmlout").html(name + "  " + address);  
28.    //dataType=json  
29.    $("#jsonout").html(data.name + "  " + data.address);  
30. };  
31.   
32. $("#myForm").ajaxForm(options);  
33.   
34. $("#myForm2").submit(funtion(){  
35.    $(this).ajaxSubmit(options);  
36.    return false ;    // prevent the form from submitting by default   
37. });  

var options = {   target: '#output',          //把服务器返回的内容放入id为output的元素中       beforeSubmit: showRequest,  //提交前的回调函数   success: showResponse,      //提交后的回调函数   //url: url,                 //默认是form的action， 如果申明，则会覆盖   //type: type,               //默认是form的method（get or post），如果申明，则会覆盖   //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型   //clearForm: true,          //成功提交后，清除所有表单元素的值   //resetForm: true,          //成功提交后，重置所有表单元素的值   timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求}function showRequest(formData, jqForm, options){   //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]   //jqForm:   jQuery对象，封装了表单的元素      //options:  options对象   var queryString = $.param(formData);   //name=1&address=2   var formElement = jqForm[0];              //将jqForm转换为DOM对象   var address = formElement.address.value;  //访问jqForm的DOM元素   return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证};function showResponse(responseText, statusText){   //dataType=xml   var name = $('name', responseXML).text();   var address = $('address', responseXML).text();   $("#xmlout").html(name + "  " + address);   //dataType=json   $("#jsonout").html(data.name + "  " + data.address);};$("#myForm").ajaxForm(options);$("#myForm2").submit(funtion(){   $(this).ajaxSubmit(options);   return false;   //阻止表单默认提交});

Validate before form submission: beforeSubmit will be called before form submission, if beforeSubmit returns false, it will prevent form submission

[javascript] view plain copy

print ?

1. beforeSubmit: validate  
2. function  validate(formData, jqForm, options) {  //Validate the form here, if it does not meet the rules, it will return false to prevent the form from submitting until it meets the rules  
3.    //Method 1: Use the formData parameter  
4.    for (var i=0; i < formData.length; i++) {  
5.        if (!formData[i].value) {  
6.             alert( 'Username, address and self-introduction cannot be empty!' );  
7.             returnfalse;   
8.         }  
9.     }   
10.   
11.    //Method 2: Use the jqForm object  
12.    var  form = jqForm[0];  //Convert the form to a dom object  
13.       if (!form.name.value || !form.address.value) {  
14.             alert( 'Username and address cannot be empty, self-introduction can be empty!' );  
15.             returnfalse;   
16.       }  
17.   
18.    //Method 3: Using the fieldValue() method, fieldValue is a method of the form plugin, which can find the value of the element in the form and return a collection.  
19.    var usernameValue = $('input[name=name]').fieldValue();  
20.    var addressValue = $('input[name=address]').fieldValue();  
21.    if (!usernameValue[0] || !addressValue[0]) {  
22.       alert( 'Username and address cannot be empty, self-introduction can be empty!' );  
23.       returnfalse;   
24.    }  
25.   
26.     var  queryString = $.param(formData);  //Assemble data  
27.     //alert(queryString); //Similar: name=1&add=2    
28.     returntrue;   
29. }  

beforeSubmit: validatefunction validate(formData, jqForm, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止   //方式一：利用formData参数   for (var i=0; i < formData.length; i++) {       if (!formData[i].value) {            alert('用户名,地址和自我介绍都不能为空!');            return false;        }    }    //方式二：利用jqForm对象   var form = jqForm[0]; //把表单转化为dom对象      if (!form.name.value || !form.address.value) {            alert('用户名和地址不能为空，自我介绍可以为空！');            return false;      }   //方式三：利用fieldValue()方法，fieldValue 是表单插件的一个方法，它能找出表单中的元素的值，返回一个集合。   var usernameValue = $('input[name=name]').fieldValue();   var addressValue = $('input[name=address]').fieldValue();   if (!usernameValue[0] || !addressValue[0]) {      alert('用户名和地址不能为空，自我介绍可以为空！');      return false;   }    var queryString = $.param(formData); //组装数据    //alert(queryString); //类似 ： name=1&add=2      return true;}