API tools faq
paste
Advertisement
SouldrinK

forms with radio buttons

SouldrinK
Dec 13th, 2012
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.96 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. .invalid { border: 1px solid #f00; }
  3. .redText { color: #f00; }
  4. </style>
  5. <script>
  6.  
  7. </script>
  8. <form name="catwebformform83321" id="surveyForm" method="post" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=58804&PageID=http%3a%2f%2fhoamco.businesscatalyst.com%2fquestionnaire-confirm.html&OID=13256184&OTYPE=1&EID=0&CID=0">
  9.  
  10. <table class="webform" cellspacing="0" cellpadding="2" border="0" style="float:left; margin-right:80px; width:350px;">
  11. <tr>
  12. <td>
  13. <label for="CAT_Custom_300225"><b>Community</b> <span class="req"><font color="#f00">*</font></span>
  14. </label>
  15. <br />
  16. <input type="text" maxlength="4000" name="CAT_Custom_300225" id="CAT_Custom_300225" placeholder="Enter the name of Community..." class="cat_textbox required" />
  17. </td>
  18. </tr>
  19. <tr>
  20. <td>
  21. <label for="FirstName"><b>Owner First Name</b> <span class="req"><font color="#f00">*</font></span>
  22. </label>
  23. <br />
  24. <input type="text" name="FirstName" id="FirstName" placeholder="Enter your first name..." class="cat_textbox required" maxlength="255" />
  25. </td>
  26. </tr>
  27. <tr>
  28. <td>
  29. <label for="LastName"><b>Owner Last Name</b> <span class="req"><font color="#f00">*</font></span>
  30. </label>
  31. <br />
  32. <input type="text" name="LastName" id="LastName" placeholder="Enter your last name..." class="cat_textbox required" maxlength="255" />
  33. </td>
  34. </tr>
  35. <tr>
  36. <td>
  37. <label for="EmailAddress"><b>Email Address</b> <span class="req"><font color="#f00">*</font></span>
  38. </label>
  39. <br />
  40. <input type="text" name="EmailAddress" id="EmailAddress" placeholder="name@email.com" class="cat_textbox required" maxlength="255" />
  41. </td>
  42. </tr>
  43. <tr>
  44. <td>
  45. <label for="CAT_Custom_300226"><b>Name or Department of person assisting you</b> <span class="req"><font color="#f00">*</font></span>
  46. </label>
  47. <br />
  48. <input type="text" maxlength="4000" name="CAT_Custom_300226" id="CAT_Custom_300226" placeholder="Enter name or department..." class="cat_textbox required" />
  49. </td>
  50. </tr>
  51. <tr>
  52. <td>
  53. <label for="CAT_Custom_300227"><b>What is the purpose of your contact?</b> <span class="req"><font color="#f00">*</font></span>
  54. </label>
  55. <br />
  56. <textarea name="CAT_Custom_300227" id="CAT_Custom_300227" cols="10" rows="4" placeholder="For example, question on compliance letter, gate services, question on billing statement etc." class="cat_listbox required" onkeydown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);"></textarea>
  57. </td>
  58. </tr>
  59. <tr>
  60. <td>
  61. <label id='label_CAT_Custom_300228'><b>In your most recent service experience, how did you contact the HOAMCO Team member?</b> <span class="req"><font color="#f00">*</font></span>
  62. </label>
  63. <br />
  64. <input type="radio" name="CAT_Custom_300228" id="CAT_Custom_300228_0" value="In Person" /><label for="In Person">&nbsp;In Person</label>
  65. <br />
  66. <input type="radio" name="CAT_Custom_300228" id="CAT_Custom_300228_1" value="By Telephone" /><label for="By Telephone">&nbsp;By Telephone</label>
  67. <br />
  68. <input type="radio" name="CAT_Custom_300228" id="CAT_Custom_300228_2" value="By Internet" /><label for="By Internet">&nbsp;By Internet</label></td>
  69. </tr>
  70. <tr>
  71. <td>
  72. <label id='label_CAT_Custom_300218'><b>Please rate our HOAMCO Team Member on his/her Responsiveness</b> <span class="req"><font color="#f00">*</font></span>
  73. </label>
  74. <br />
  75. <input type="radio" name="CAT_Custom_300218" id="CAT_Custom_300218_0" value="Unsatisfactory" /><label for="Unsatisfactory">&nbsp;Unsatisfactory</label>
  76. <br />
  77. <input type="radio" name="CAT_Custom_300218" id="CAT_Custom_300218_1" value="Satisfactory" /><label for="Satisfactory">&nbsp;Satisfactory</label>
  78. <br />
  79. <input type="radio" name="CAT_Custom_300218" id="CAT_Custom_300218_2" value="Outstanding" /><label for="Outstanding">&nbsp;Outstanding</label></td>
  80. </tr>
  81. <tr>
  82. <td>
  83. <label id='label_CAT_Custom_300231'><b>Please rate our HOAMCO Team Member on his/her Professionalism</b> <span class="req"><font color="#f00">*</font></span>
  84. </label>
  85. <br />
  86. <input type="radio" name="CAT_Custom_300231" id="CAT_Custom_300231_0" value="Unsatisfactory" /><label for="Unsatisfactory">&nbsp;Unsatisfactory</label>
  87. <br />
  88. <input type="radio" name="CAT_Custom_300231" id="CAT_Custom_300231_1" value="Satisfactory" /><label for="Satisfactory">&nbsp;Satisfactory</label>
  89. <br />
  90. <input type="radio" name="CAT_Custom_300231" id="CAT_Custom_300231_2" value="Outstanding" /><label for="Outstanding">&nbsp;Outstanding</label></td>
  91. </tr>
  92. <tr>
  93. <td>
  94. <label id='label_CAT_Custom_300232'><b>Please rate our HOAMCO Team Member on his/her Politeness</b> <span class="req"><font color="#f00">*</font></span>
  95. </label>
  96. <br />
  97. <input type="radio" name="CAT_Custom_300232" id="CAT_Custom_300232_0" value="Unsatisfactory" /><label for="Unsatisfactory">&nbsp;Unsatisfactory</label>
  98. <br />
  99. <input type="radio" name="CAT_Custom_300232" id="CAT_Custom_300232_1" value="Satisfactory" /><label for="Satisfactory">&nbsp;Satisfactory</label>
  100. <br />
  101. <input type="radio" name="CAT_Custom_300232" id="CAT_Custom_300232_2" value="Outstanding" /><label for="Outstanding">&nbsp;Outstanding</label></td>
  102. </tr>
  103. </table>
  104. <table class="webform" cellspacing="0" cellpadding="2" border="0" style="float:left; margin-right:80px; width:300px;">
  105. <tr>
  106. <td>
  107. <label id='label_CAT_Custom_300233'><b>Please rate our HOAMCO Team Member on his/her knowledge of the issue</b>
  108. <span class="req"><font color="#f00">*</font></span>
  109. </label>
  110. <br />
  111. <input type="radio" name="CAT_Custom_300233" id="CAT_Custom_300233_0" value="Unsatisfactory" /><label for="Unsatisfactory">&nbsp;Unsatisfactory</label>
  112. <br />
  113. <input type="radio" name="CAT_Custom_300233" id="CAT_Custom_300233_1" value="Satisfactory" /><label for="Satisfactory">&nbsp;Satisfactory</label>
  114. <br />
  115. <input type="radio" name="CAT_Custom_300233" id="CAT_Custom_300233_2" value="Outstanding" /><label for="Outstanding">&nbsp;Outstanding</label></td>
  116. </tr>
  117. <tr>
  118. <td>
  119. <label id='label_CAT_Custom_300234'><b>Please rate our HOAMCO Team Member on his/her handling follow-up questions</b>
  120. <span class="req"><font color="#f00">*</font></span>
  121. </label>
  122. <br />
  123. <input type="radio" name="CAT_Custom_300234" id="CAT_Custom_300234_0" value="Unsatisfactory" /><label for="Unsatisfactory">&nbsp;Unsatisfactory</label>
  124. <br />
  125. <input type="radio" name="CAT_Custom_300234" id="CAT_Custom_300234_1" value="Satisfactory" /><label for="Satisfactory">&nbsp;Satisfactory</label>
  126. <br />
  127. <input type="radio" name="CAT_Custom_300234" id="CAT_Custom_300234_2" value="Outstanding" /><label for="Outstanding">&nbsp;Outstanding</label></td>
  128. </tr>
  129. <tr>
  130. <td>
  131. <label id='label_CAT_Custom_300237'><b>Please indicate how quickly your service request was handled</b> <span class="req"><font color="#f00">*</font></span>
  132. </label>
  133. <br />
  134. <input type="radio" name="CAT_Custom_300237" id="CAT_Custom_300237_0" value="Immediately" /><label for="Immediately">&nbsp;Immediately</label>
  135. <br />
  136. <input type="radio" name="CAT_Custom_300237" id="CAT_Custom_300237_1" value="Less than one day" /><label for="Less than one day">&nbsp;Less than one day</label>
  137. <br />
  138. <input type="radio" name="CAT_Custom_300237" id="CAT_Custom_300237_2" value="Within 2 - 5 business days" /><label for="Within 2 - 5 business days">&nbsp;Within 2 - 5 business days</label>
  139. <br />
  140. <input type="radio" name="CAT_Custom_300237" id="CAT_Custom_300237_3" value="More than one week" /><label for="More than one week">&nbsp;More than one week</label>
  141. <br />
  142. <input type="radio" name="CAT_Custom_300237" id="CAT_Custom_300237_4" value="Issue still not resolved" /><label for="Issue still not resolved">&nbsp;Issue still not resolved</label></td>
  143. </tr>
  144. <tr>
  145. <td>
  146. <label id='label_CAT_Custom_300243'><b>Overall, how satisfied are you with the service experience?</b> <span class="req"><font color="#f00">*</font></span>
  147. </label>
  148. <br />
  149. <input type="radio" name="CAT_Custom_300243" id="CAT_Custom_300243_0" value="Very Satisfied" /><label for="Very Satisfied">&nbsp;Very Satisfied</label>
  150. <br />
  151. <input type="radio" name="CAT_Custom_300243" id="CAT_Custom_300243_1" value="Satisfied" /><label for="Satisfied">&nbsp;Satisfied</label>
  152. <br />
  153. <input type="radio" name="CAT_Custom_300243" id="CAT_Custom_300243_2" value="Neutral" /><label for="Neutral">&nbsp;Neutral</label>
  154. <br />
  155. <input type="radio" name="CAT_Custom_300243" id="CAT_Custom_300243_3" value="Somewhat Unsatisfied" /><label for="Somewhat Unsatisfied">&nbsp;Somewhat Unsatisfied</label>
  156. <br />
  157. <input type="radio" name="CAT_Custom_300243" id="CAT_Custom_300243_4" value="Very Unsatisfied" /><label for="Very Unsatisfied">&nbsp;Very Unsatisfied</label></td>
  158. </tr>
  159. <tr>
  160. <td>
  161. <label for="CAT_Custom_300244"><b>Comments</b></label>
  162. <br />
  163. <textarea name="CAT_Custom_300244" class='required' id="CAT_Custom_300244" cols="10" rows="4" placeholder="Add a brief message..." class="cat_listbox" onkeydown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);"></textarea>
  164. </td>
  165. </tr>
  166. <tr>
  167. <td>
  168. <input class="cat_button" type="submit" value="Submit" id="catwebformbutton" requiredClass="required" emailClass="EmailAddress" formId="catwebformform83321"/>
  169. </td>
  170. </tr>
  171. </table>
  172. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  173. <script type="text/javascript">
  174. //<![CDATA[
  175. var submitcount49502 = 0;
  176.  
  177. function isValidEmailAddress(emailAddress) {
  178. var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  179. return pattern.test(emailAddress);
  180. };
  181.  
  182. $("#catwebformbutton").click(function(e) {
  183. e.preventDefault();
  184. var className = $(this).attr("requiredClass");
  185. var emailClass = $(this).attr("emailClass");
  186. var formId = $(this).attr("formId");
  187. var errors = 0;
  188.  
  189. var radios = Array(
  190. "CAT_Custom_300228",
  191. "CAT_Custom_300218",
  192. "CAT_Custom_300231",
  193. "CAT_Custom_300232",
  194. "CAT_Custom_300233",
  195. "CAT_Custom_300234",
  196. "CAT_Custom_300237",
  197. "CAT_Custom_300243"
  198. );
  199.  
  200. for (var i=0; i<radios.length; i++) {
  201. var radioGroup = radios[i];
  202. var radioField = $("input[name=" + radioGroup + "]");
  203. if (!radioField.filter(':checked').val()) {
  204. $("#label_" + radioGroup).addClass('redText');
  205. errors++;
  206. } else {
  207. $("#label_" + radioGroup).removeClass('redText');
  208. }
  209. }
  210.  
  211. $("." + className).each(function() {
  212. if(!$(this).val()) {
  213. $(this).addClass("invalid");
  214. $(this).prev().prev().addClass("redText");
  215. errors++;
  216. } else {
  217. $(this).removeClass("invalid");
  218. $(this).prev().prev().removeClass("redText");
  219. }
  220. });
  221.  
  222.  
  223.  
  224. if (!$("." + emailClass).val() || !isValidEmailAddress($("." + emailClass).val())) {
  225. $("." + emailClass).addClass("invalid");
  226. $("." + emailClass).prev().prev().addClass("redText");
  227. errors++;
  228. } else {
  229. $("." + emailClass).removeClass("invalid");
  230. $("." + emailClass).prev().prev().removeClass("redText");
  231. }
  232.  
  233. if (errors > 0) return false;
  234. if (submitcount49502 == 0) {
  235. submitcount49502 ++;
  236. $("#" + formId).submit();
  237. return false;
  238. } else {
  239. alert("Form submission is in progress.");
  240. return false;
  241. }
  242.  
  243. });
  244. //]]>
  245. </script>
  246. </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!