Your Ad Here

advanced code snippet search

Posted By

DavidAspden on 12/22/08


Tagged

ajax post forms submit validate


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

umang_nine


formOverRide

 / Published in: JavaScript
 

We send a form via an ajax call after some basic validation checks based upon whether the element was wrapped in a div tag with a class of required. Subsequently we post it via out makeRequestPost ajax routine, updating the targetDiv appropriately.

Expand | Embed | Plain Text 
  1. // JavaScript Document
  2.  
  3. //David Aspden Dec 08
  4.  
  5. //Can we force actions to Ajax calls for myForms?
  6.  
  7. function overRideSubmit(myForm,targetDivId){
  8. 	if(quickValidate(myForm)){
  9. 		if(typeof(target) == "string"){
  10. 				var targetDiv = document.getElementById(targetDiv);
  11. 		}
  12. 		else{
  13. 			targetDiv = target; 
  14. 		}
  15. 		var action = myForm.action;
  16. 		var method = myForm.method;
  17. 		//So we know what would have happened, re route through the ajax request.
  18. 		if(method=="get"){
  19. 			var getString = buildParameterString(myForm);
  20. 			if(action.indexOf('?') == -1){
  21. 				getString = '?'+getString;
  22. 			}
  23. 			else{
  24. 				getString = '&'+getString;
  25. 			}
  26. 			makeRequesttoObject(action+getString, targetDiv);
  27. 		}
  28. 		if(method=="post"){
  29. 			var postStr = buildParameterString(myForm);
  30. 			makeRequestPOST(action, postStr, targetDiv);
  31. 		}
  32. 	}
  33. 	return false;
  34. }
  35.  
  36. //This will be the getString or PostParameters
  37. function buildParameterString(myForm){
  38. 	var parameterString="";
  39. 	var radioParams = new Object;
  40. 	for(i=0; i<myForm.length; i++){
  41. 			if(myForm.elements[i].type !='submit' | myForm.elements[i].type !='reset' | myForm.elements[i].type !='button' | myForm.elements[i].type !='image' | myForm.elements[i].type !='file'){
  42. 			if(myForm.elements[i].type =='text' | myForm.elements[i].type =='hidden'){
  43. 				parameterString+=myForm.elements[i].name+'='+encodeURI(myForm.elements[i].value)+'&';
  44. 			}
  45. 			if(myForm.elements[i].type =='radio'){
  46. 				//Radio Buttons ->With same name...
  47. 						if(!radioParams[myForm.elements[i].name]){
  48. 							//Ensure we capture the fact that it is there.
  49. 							radioParams[myForm.elements[i].name] = "";
  50. 						}
  51. 						if (myForm.elements[i].checked==true){
  52. 							//Capture value
  53. 							radioParams[myForm.elements[i].name] = encodeURI(myForm.elements[i].value);
  54.       					}
  55. 						else{
  56. 							//We do not add to the radioParams object
  57. 						}
  58.  
  59. 				//Delay Adding Rad Vals until the end in case radio values are in different places
  60. 			}
  61. 			if(myForm.elements[i].type =='checkbox'){
  62. 				//Checkbox Checks
  63. 				if (myForm.elements[i].checked == true){
  64. 					var check_val = 1;
  65.       			}
  66. 				else{
  67. 					var check_val = 0;
  68. 				}
  69. 				//
  70. 				parameterString+=myForm.elements[i].name+'='+encodeURI(check_val)+'&';
  71. 			}
  72. 		}
  73.  
  74. 	}
  75. 	//parse Radio Array
  76. 	var radios="";
  77. 	for(prop in radioParams){
  78. 		radios += prop+'='+radioParams[prop]+'&';
  79. 	}
  80. 	urlString = parameterString.substr(0,parameterString.length-1)+'&'+radios
  81.  
  82. 	return urlString.substr(0, urlString.length-1);
  83. }
  84. //We just check that things are actually filled in.
  85. function quickValidate(myForm){
  86. 	for(i=0; i<myForm.length; i++){
  87. 		if(myForm.elements[i].parentNode.tagName == 'DIV'){
  88. 			if((myForm.elements[i].parentNode.className == "required" | myForm.elements[i].parentNode.className == 'required_false') && myForm.elements[i].value ==''){
  89. 				myForm.elements[i].parentNode.className = "required_false"
  90. 				return false;	
  91. 			}
  92. 			if(myForm.elements[i].parentNode.className == 'required_false' && myForm.elements[i].value !=''){
  93. 					myForm.elements[i].parentNode.className = 'required';
  94. 			}
  95. 		}
  96. 		if(myForm.elements[i].parentNode.tagName == 'LABEL'){
  97. 			if(myForm.elements[i].parentNode.parentNode.tagName == 'DIV'){
  98. 				if((myForm.elements[i].parentNode.parentNode.className == 'required' | myForm.elements[i].parentNode.parentNode.className == 'required_false') && myForm.elements[i].value ==''){
  99. 					//Should be a div
  100. 					myForm.elements[i].parentNode.parentNode.className = 'required_false';
  101. 					return false;	
  102. 				}
  103. 				if((myForm.elements[i].parentNode.parentNode.className == 'required_false') && myForm.elements[i].value !=''){
  104. 					myForm.elements[i].parentNode.parentNode.className = 'required';
  105. 				}
  106. 			}
  107. 		}
  108.  
  109. 	} //For Loop
  110. 	return true;
  111. }

Report this snippet  

You need to login to post a comment.