My complete contact.js


/ Published in: JavaScript
Save to your folder(s)

This is my complete code for contact.js


Copy this code and paste it in your HTML
  1. function validateFields() {
  2. var frmEl = document.getElementById("cForm");
  3. var posRegard = document.getElementById("posRegard");
  4. var posName = document.getElementById("posName");
  5. var posEmail = document.getElementById("posEmail");
  6. var posText = document.getElementById("posText");
  7. var strCC = document.getElementById('selfCC');
  8. var whiteSpace = /^[\s]+$/;
  9. var emailFormat = /^[\w\.\-]+@[\w\.\-]+\.[\w\.\-]+$/;
  10.  
  11. if ( posRegard.value == "" || whiteSpace.test(posRegard.value) ) {
  12. document.getElementById("emailSuccess").style.display = "none";
  13. hideAllErrors();
  14. document.getElementById("regardError").style.display = "inline";
  15. document.getElementById("posRegard").select();
  16. document.getElementById("posRegard").focus();
  17. } else if ( posName.value == "" || whiteSpace.test(posName.value) ) {
  18. document.getElementById("emailSuccess").style.display = "none";
  19. hideAllErrors();
  20. document.getElementById("nameError").style.display = "inline";
  21. document.getElementById("posName").select();
  22. document.getElementById("posName").focus();
  23. } else if ( posEmail.value == "" || whiteSpace.test(posEmail.value) ) {
  24. document.getElementById("emailSuccess").style.display = "none";
  25. hideAllErrors();
  26. document.getElementById("emailError1").style.display = "inline";
  27. document.getElementById("posEmail").select();
  28. document.getElementById("posEmail").focus();
  29. } else if ( (posEmail.value !="") && (!posEmail.value.match(emailFormat)) ) {
  30. document.getElementById("emailSuccess").style.display = "none";
  31. hideAllErrors();
  32. document.getElementById("emailError2").style.display = "inline";
  33. document.getElementById("posEmail").select();
  34. document.getElementById("posEmail").focus();
  35. } else if ( posText.value == "" || whiteSpace.test(posText.value) ) {
  36. document.getElementById("emailSuccess").style.display = "none";
  37. hideAllErrors();
  38. document.getElementById("messageError").style.display = "inline";
  39. document.getElementById("posText").select();
  40. document.getElementById("posText").focus();
  41. } else {
  42. hideAllErrors();
  43. sendPosEmail();
  44. }
  45. }
  46. function hideAllErrors() {
  47. document.getElementById("regardError").style.display = "none";
  48. document.getElementById("nameError").style.display = "none";
  49. document.getElementById("emailError1").style.display = "none";
  50. document.getElementById("emailError2").style.display = "none";
  51. document.getElementById("messageError").style.display = "none";
  52. document.getElementById("ccError").style.display = "none";
  53. }
  54. function sendPosEmail () {
  55. var success = document.getElementById('emailSuccess');
  56. var posRegard = document.getElementById('posRegard');
  57. var posName = document.getElementById('posName');
  58. var posEmail = document.getElementById('posEmail');
  59. var posText = document.getElementById('posText');
  60. var strCC = document.getElementById('selfCC').value;
  61. var page = "scripts/xmlHttpRequest.php?contact=true&xml=true";
  62.  
  63. showContactTimer(); // quickly begin the load bar
  64. success.style.display = 'none'; // hide the success bar (incase this is a multi-email
  65. document.getElementById("sendContactEmail").disabled = true; //disable the Send button
  66.  
  67. // convert (&, +, =) to string equivs. Needed so URL encoded POST won't choke.
  68. var str1 = posName.value;
  69. str1 = str1.replace(/&/g,"**am**");
  70. str1 = str1.replace(/=/g,"**eq**");
  71. str1 = str1.replace(/\+/g,"**pl**");
  72. var str2 = posEmail.value;
  73. str2 = str2.replace(/&/g,"**am**");
  74. str2 = str2.replace(/=/g,"**eq**");
  75. str2 = str2.replace(/\+/g,"**pl**");
  76. var str4 = posText.value;
  77. str4 = str4.replace(/&/g,"**am**");
  78. str4 = str4.replace(/=/g,"**eq**");
  79. str4 = str4.replace(/\+/g,"**pl**");
  80.  
  81. var stuff = "selfCC="+strCC+"&posRegard="+str1+"&posName="+str1+"&posEmail="+str2+"&posText="+str4;
  82. loadXMLPosDoc(page,stuff)
  83. }
  84. function showContactTimer () {
  85. var loader = document.getElementById('loadBar');
  86. loader.style.display = 'block';
  87. sentTimer = setTimeout("hideContactTimer()",6000);
  88. }
  89.  
  90. function hideContactTimer () {
  91. var loader = document.getElementById('loadBar');
  92. var success = document.getElementById('emailSuccess');
  93. var fieldArea = document.getElementById('contactFormArea');
  94. var inputs = fieldArea.getElementsByTagName('input');
  95. var inputsLen = inputs.length;
  96. var tAreas = fieldArea.getElementsByTagName('textarea');
  97. var tAreasLen = tAreas.length;
  98. // Hide the load bar alas! Done Loading
  99. loader.style.display = "none";
  100. success.style.display = "block";
  101. success.innerHTML = grabPosXML("confirmation");
  102. document.getElementById("sendContactEmail").disabled = false; //enable the Send button
  103. // Now Hijack the form elements
  104. for ( i=0;i<inputsLen;i++ ) {
  105. if ( inputs[i].getAttribute('type') == 'text' ) {
  106. inputs[i].value = '';
  107. }
  108. }
  109. for ( j=0;j<tAreasLen;j++ ) {
  110. tAreas[j].value = '';
  111. }
  112. }
  113.  
  114. function ajaxContact() {
  115. var frmEl = document.getElementById('cForm');
  116. addEvent(frmEl, 'submit', validateFields, false);
  117. frmEl.onsubmit = function() { return false; }
  118. }
  119. addEvent(window, 'load',ajaxContact, false);
  120.  
  121. function toggle(targetId) {
  122. target = document.getElementById(targetId);
  123. if (target.style.display == 'block'){
  124. target.style.display='none';
  125. } else {
  126. target.style.display='block';
  127. }
  128. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.