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.

  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.