PlanningEventPollFormWeb.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="web/common/layout/DefaultLayoutWeb">
  6. <!--
  7. *******************************************************************************
  8. * @source : PlanningEventPollFormWeb.html
  9. * @desc : 이벤트 > 설문조사 Page
  10. *============================================================================
  11. * Pastelmall
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.4.2 sowon 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <!-- container -->
  22. <div id="container" class="container ev">
  23. <div class="breadcrumb">
  24. <ul>
  25. <li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
  26. <li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
  27. <li class="bread_2depth" th:text="${pollInfo.planNm}"></li>
  28. </ul>
  29. </div>
  30. <div class="wrap">
  31. <div class="content wide survey">
  32. <div class="cont_head">
  33. <div>
  34. <h3 th:text="${pollInfo.pollTitle}"></h3>
  35. <div class="period">
  36. <span th:text="${pollInfo.pollStdt}"></span> ~ <span th:text="${pollInfo.pollEddt}"></span>
  37. </div>
  38. <!-- <div class="shareSet">
  39. <button class="btn_share" data-name="openShare">공유하기</button>
  40. toggle contents
  41. <div class="shareWrap">
  42. <div id="layerShare" class="setShare open">
  43. <span>
  44. <button type="button" onclick="('');" class="kk"><span>카카오톡</span></button>
  45. <button type="button" onclick="('');" class="fb"><span>페이스북</span></button>
  46. <button type="button" onclick="('');" class="tw"><span>트위터</span></button>
  47. <button type="button" onclick="('');" class="url"><span>URL</span></button>
  48. </span>
  49. </div>
  50. </div>
  51. </div> -->
  52. </div>
  53. </div>
  54. <div class="cont_body">
  55. <div class="survey_wrap">
  56. <div class="survey_con">
  57. <!-- <form class="form_wrap" name="pollListForm" th:action="@{'/planning/event/poll/save'}" th:method="post"> -->
  58. <th:block th:each="pollData, pollStat : ${pollList}">
  59. <div class="survey_row" th:classappend="${pollData.pollQtype == '30'? 'q4': ''}">
  60. <h4><span class="question" th:text="'Q'+${pollStat.index+1}+'.'"></span>[[${pollData.pollQtitle}]]</h4>
  61. <div class="answer">
  62. <div class="form_field">
  63. <th:block th:if="${pollData.pollQtype == '10'}">
  64. <ul class="clear" th:id="${pollData.pollQsq+'_'+(pollStat.index+1)}">
  65. <li th:if="${pollData.pollQval1 != null && pollData.pollQval1 != ''}">
  66. <th:block th:if="${pollData.pollQval1 != '기타'}">
  67. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-1-'+${pollData.pollQsq}" th:value="${pollData.pollQval1}" ><label th:for="'rdi-1-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval1}"></span></label>
  68. </th:block>
  69. <th:block th:unless="${pollData.pollQval1 != '기타'}">
  70. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-1-'+${pollData.pollQsq}" th:value="${pollData.pollQval1}" class="etc_radio"><label th:for="'rdi-1-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval1}"></span></label>
  71. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  72. </th:block>
  73. </li>
  74. <li th:if="${pollData.pollQval2 != null && pollData.pollQval2 != ''}">
  75. <th:block th:if="${pollData.pollQval2 != '기타'}">
  76. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-2-'+${pollData.pollQsq}" th:value="${pollData.pollQval2}" ><label th:for="'rdi-2-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval2}"></span></label>
  77. </th:block>
  78. <th:block th:unless="${pollData.pollQval2 != '기타'}">
  79. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-2-'+${pollData.pollQsq}" th:value="${pollData.pollQval2}" class="etc_radio"><label th:for="'rdi-2-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval2}"></span></label>
  80. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  81. </th:block>
  82. </li>
  83. <li th:if="${pollData.pollQval3 != null && pollData.pollQval3 != ''}">
  84. <th:block th:if="${pollData.pollQval3 != '기타'}">
  85. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-3-'+${pollData.pollQsq}" th:value="${pollData.pollQval3}" ><label th:for="'rdi-3-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval3}"></span></label>
  86. </th:block>
  87. <th:block th:unless="${pollData.pollQval3 != '기타'}">
  88. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-3-'+${pollData.pollQsq}" th:value="${pollData.pollQval3}" class="etc_radio"><label th:for="'rdi-3-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval3}"></span></label>
  89. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  90. </th:block>
  91. </li>
  92. <li th:if="${pollData.pollQval4 != null && pollData.pollQval4 != ''}">
  93. <th:block th:if="${pollData.pollQval4 != '기타'}">
  94. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-4-'+${pollData.pollQsq}" th:value="${pollData.pollQval4}" ><label th:for="'rdi-4-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval4}"></span></label>
  95. </th:block>
  96. <th:block th:unless="${pollData.pollQval4 != '기타'}">
  97. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-4-'+${pollData.pollQsq}" th:value="${pollData.pollQval4}" class="etc_radio"><label th:for="'rdi-4-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval4}"></span></label>
  98. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  99. </th:block>
  100. </li>
  101. <li th:if="${pollData.pollQval5 != null && pollData.pollQval5 != ''}">
  102. <th:block th:if="${pollData.pollQval5 != '기타'}">
  103. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-5-'+${pollData.pollQsq}" th:value="${pollData.pollQval5}" ><label th:for="'rdi-5-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval5}"></span></label>
  104. </th:block>
  105. <th:block th:unless="${pollData.pollQval5 != '기타'}">
  106. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-5-'+${pollData.pollQsq}" th:value="${pollData.pollQval5}" class="etc_radio"><label th:for="'rdi-5-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval5}"></span></label>
  107. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  108. </th:block>
  109. </li>
  110. <li th:if="${pollData.pollQval6 != null && pollData.pollQval6 != ''}">
  111. <th:block th:if="${pollData.pollQval6 != '기타'}">
  112. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-6-'+${pollData.pollQsq}" th:value="${pollData.pollQval6}"><label th:for="'rdi-6-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval6}"></span></label>
  113. </th:block>
  114. <th:block th:unless="${pollData.pollQval6 != '기타'}">
  115. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-6-'+${pollData.pollQsq}" th:value="${pollData.pollQval6}" class="etc_radio"><label th:for="'rdi-6-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval6}"></span></label>
  116. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  117. </th:block>
  118. </li>
  119. <li th:if="${pollData.pollQval7 != null && pollData.pollQval7 != ''}">
  120. <th:block th:if="${pollData.pollQval7 != '기타'}">
  121. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-7-'+${pollData.pollQsq}" th:value="${pollData.pollQval7}" ><label th:for="'rdi-7-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval7}"></span></label>
  122. </th:block>
  123. <th:block th:unless="${pollData.pollQval7 != '기타'}">
  124. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-7-'+${pollData.pollQsq}" th:value="${pollData.pollQval7}" class="etc_radio"><label th:for="'rdi-7-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval7}"></span></label>
  125. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  126. </th:block>
  127. </li>
  128. <li th:if="${pollData.pollQval8 != null && pollData.pollQval8 != ''}">
  129. <th:block th:if="${pollData.pollQval8 != '기타'}">
  130. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-8-'+${pollData.pollQsq}" th:value="${pollData.pollQval8}"><label th:for="'rdi-8-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval8}"></span></label>
  131. </th:block>
  132. <th:block th:unless="${pollData.pollQval8 != '기타'}">
  133. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-8-'+${pollData.pollQsq}" th:value="${pollData.pollQval8}" class="etc_radio"><label th:for="'rdi-8-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval8}"></span></label>
  134. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  135. </th:block>
  136. </li>
  137. <li th:if="${pollData.pollQval9 != null && pollData.pollQval9 != ''}">
  138. <th:block th:if="${pollData.pollQval9 != '기타'}">
  139. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-9-'+${pollData.pollQsq}" th:value="${pollData.pollQval9}" ><label th:for="'rdi-9-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval9}"></span></label>
  140. </th:block>
  141. <th:block th:unless="${pollData.pollQval9 != '기타'}">
  142. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-9-'+${pollData.pollQsq}" th:value="${pollData.pollQval9}"class="etc_radio"><label th:for="'rdi-9-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval9}"></span></label>
  143. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  144. </th:block>
  145. </li>
  146. <li th:if="${pollData.pollQval10 != null && pollData.pollQval10 != ''}">
  147. <th:block th:if="${pollData.pollQval10 != '기타'}">
  148. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-10-'+${pollData.pollQsq}" th:value="${pollData.pollQval10}"><label th:for="'rdi-10-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval10}"></span></label>
  149. </th:block>
  150. <th:block th:unless="${pollData.pollQval10 != '기타'}">
  151. <input type="radio" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'rdi-10-'+${pollData.pollQsq}" th:value="${pollData.pollQval10}" class="etc_radio"><label th:for="'rdi-10-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval10}"></span></label>
  152. <input type="text" th:name="'etc_input_'+${pollData.pollQsq}" class="etc_input" />
  153. </th:block>
  154. </li>
  155. </ul>
  156. </th:block>
  157. <th:block th:if="${pollData.pollQtype == '20'}">
  158. <ul class="clear" th:id="${pollData.pollQsq+'_'+(pollStat.index+1)}">
  159. <li th:if="${pollData.pollQval1 != null && pollData.pollQval1 != ''}">
  160. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-1-'+${pollData.pollQsq}" th:value="${pollData.pollQval1}"><label th:for="'chk-1-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval1}"></span></label>
  161. </li>
  162. <li th:if="${pollData.pollQval2 != null && pollData.pollQval2 != ''}">
  163. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-2-'+${pollData.pollQsq}" th:value="${pollData.pollQval2}"><label th:for="'chk-2-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval2}"></span></label>
  164. </li>
  165. <li th:if="${pollData.pollQval3 != null && pollData.pollQval3 != ''}">
  166. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-3-'+${pollData.pollQsq}" th:value="${pollData.pollQval3}"><label th:for="'chk-3-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval3}"></span></label>
  167. </li>
  168. <li th:if="${pollData.pollQval4 != null && pollData.pollQval4 != ''}">
  169. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-4-'+${pollData.pollQsq}" th:value="${pollData.pollQval4}"><label th:for="'chk-4-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval4}"></span></label>
  170. </li>
  171. <li th:if="${pollData.pollQval5 != null && pollData.pollQval5 != ''}">
  172. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-5-'+${pollData.pollQsq}" th:value="${pollData.pollQval5}"><label th:for="'chk-5-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval5}"></span></label>
  173. </li>
  174. <li th:if="${pollData.pollQval6 != null && pollData.pollQval6 != ''}">
  175. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-6-'+${pollData.pollQsq}" th:value="${pollData.pollQval6}"><label th:for="'chk-6-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval6}"></span></label>
  176. </li>
  177. <li th:if="${pollData.pollQval7 != null && pollData.pollQval7 != ''}">
  178. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-7-'+${pollData.pollQsq}" th:value="${pollData.pollQval7}"><label th:for="'chk-7-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval7}"></span></label>
  179. </li>
  180. <li th:if="${pollData.pollQval8 != null && pollData.pollQval8 != ''}">
  181. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-8-'+${pollData.pollQsq}" th:value="${pollData.pollQval8}"><label th:for="'chk-8-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval8}"></span></label>
  182. </li>
  183. <li th:if="${pollData.pollQval9 != null && pollData.pollQval9 != ''}">
  184. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-9-'+${pollData.pollQsq}" th:value="${pollData.pollQval9}"><label th:for="'chk-9-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval9}"></span></label>
  185. </li>
  186. <li th:if="${pollData.pollQval10 != null && pollData.pollQval10 != ''}">
  187. <input type="checkbox" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="'chk-10-'+${pollData.pollQsq}" th:value="${pollData.pollQval10}"><label th:for="'chk-10-'+${pollData.pollQsq}"><span th:text="${pollData.pollQval10}"></span></label>
  188. </li>
  189. </ul>
  190. </th:block>
  191. <th:block th:if="${pollData.pollQtype == '30'}">
  192. <div class="input_wrap">
  193. <input type="text" class="form_control" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="${pollData.pollQsq+'_'+(pollStat.index+1)}" />
  194. </div>
  195. </th:block>
  196. <th:block th:if="${pollData.pollQtype == '40'}">
  197. <div class="input_wrap">
  198. <textarea class="doc_ans" th:name="${pollData.pollQsq+'_'+(pollStat.index+1)}" th:id="${pollData.pollQsq+'_'+(pollStat.index+1)}" placeholder="1,000자 이내로 입력해 주세요." style="resize: none;"></textarea>
  199. <p class="txt_cnt">
  200. <span id="ans_cnt" class="ans_cnt">(<em class="c_primary">0</em>/1000자)</span>
  201. </p>
  202. </div>
  203. </th:block>
  204. </div>
  205. </div>
  206. </div>
  207. </th:block>
  208. <div class="btn_wrap">
  209. <button type="submit" class="btn btn_dark" onclick="fnSubmitPoll()">응답 완료</button>
  210. </div>
  211. <!-- </form> -->
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <!-- // container -->
  219. <script th:inline="javascript">
  220. let pollList = [[${pollList}]];
  221. var fnSubmitPoll = function () {
  222. //let pollQsq_20 = new Array();
  223. let pollQsq_10 = '';
  224. let pollQsq_20 = '';
  225. let pollQsq_30 = '';
  226. let pollQsq_40 = '';
  227. // 유효성검사
  228. for (let i = 0; i < pollList.length; i++) {
  229. let type = pollList[i].pollQtype;
  230. let pollQsq = pollList[i].pollQsq;
  231. if(type == "10"){
  232. if($('input:radio[name='+pollQsq+'_'+(i+1)+']').is(':checked')== false){
  233. mcxDialog.alert("Q"+(i+1)+"항목은 필수항목입니다.");
  234. return;
  235. }
  236. if($('input:radio[name='+pollQsq+'_'+(i+1)+']:checked').val() == '기타'){
  237. if($('input:text[name=etc_input_'+pollQsq+']').val()==''){
  238. mcxDialog.alert("Q"+(i+1)+"기타 내용을 입력해주세요.");
  239. return;
  240. }
  241. }
  242. if ($('input:radio[name='+pollQsq+'_'+(i+1)+']:checked').val() == '기타') {
  243. pollQsq_10 += pollQsq +'-'+$('input:text[name=etc_input_'+pollQsq+']').val() + '/';
  244. }else{
  245. pollQsq_10 += pollQsq +'-'+$('input:radio[name='+pollQsq+'_'+(i+1)+']:checked').val() + '/';
  246. }
  247. }
  248. if(type == "20"){
  249. if($('input:checkbox[name='+pollQsq+'_'+(i+1)+']').is(':checked')== false){
  250. mcxDialog.alert("Q"+(i+1)+"항목은 필수항목입니다.");
  251. return;
  252. }else{
  253. let chk = $('input:checkbox[name='+pollQsq+'_'+(i+1)+']:checked');
  254. //pollQsq_20.push(pollQsq+ '-');
  255. pollQsq_20 += pollQsq + '-' ;
  256. for(let i=0; i< chk.length; i++){
  257. //pollQsq_20.push(chk.eq(i).val());
  258. pollQsq_20 += chk.eq(i).val();
  259. if (i != chk.length-1) {
  260. pollQsq_20 += ',';
  261. }
  262. }
  263. pollQsq_20 += '/' ;
  264. }
  265. }
  266. if(type == "30"){
  267. if($('input:text[name='+pollQsq+'_'+(i+1)+']').val() == ''){
  268. mcxDialog.alert("Q"+(i+1)+"항목은 필수항목입니다.");
  269. return;
  270. }else{
  271. pollQsq_30 += pollQsq +'-'+$('input:text[name='+pollQsq+'_'+(i+1)+']').val() + '/';
  272. }
  273. }
  274. if(type == "40"){
  275. if($('textarea[name='+pollQsq+'_'+(i+1)+']').val() == ''){
  276. mcxDialog.alert("Q"+(i+1)+"항목은 필수항목입니다.");
  277. return;
  278. }else{
  279. //max1.set(pollQsq,$('textarea[name='+pollQsq+'_'+(i+1)+']').val());
  280. pollQsq_40 += pollQsq +'-'+$('textarea[name='+pollQsq+'_'+(i+1)+']').val() + '/';
  281. }
  282. }
  283. }
  284. var data = {pollQsq_10 : pollQsq_10,
  285. pollQsq_20 : pollQsq_20,
  286. pollQsq_30 : pollQsq_30,
  287. pollQsq_40 : pollQsq_40};
  288. var jsonData = JSON.stringify(data);
  289. $.ajax({
  290. type : "POST",
  291. data : jsonData,
  292. url : '/planning/event/poll/save',
  293. contentType : 'application/json',
  294. dataType : 'json',
  295. success : function(result) {
  296. mcxDialog.alertC('설문조사 이벤트 참여가 완료되었습니다.', {
  297. sureBtnText: "확인",
  298. sureBtnClick: function() {
  299. cfnGoToPage(_PAGE_EVENT_MAIN);
  300. }
  301. });
  302. }
  303. })
  304. }
  305. $(document).ready( function() {
  306. //SNS 공유 버튼 토글
  307. $("button[data-name=openShare]").on("click", function(){
  308. $(this).toggleClass("on").next(".shareWrap").toggleClass("on");
  309. return false;
  310. });
  311. //영역밖 클릭으로 SNS 공유토글 닫기
  312. $("body").on('click', function(e) {
  313. if(!$(".shareWrap.on").parent().has(e.target).length) {
  314. $("button[data-name=openShare]").removeClass("on");
  315. $(".shareWrap").removeClass("on");
  316. };
  317. });
  318. //글자 수 카운트
  319. $('.doc_ans').keyup(function (e){
  320. var content = $(this).val();
  321. $('#ans_cnt').html("(<em class='c_primary'>"+content.length+"</em>/1000자)");
  322. if (content.length > 1000){
  323. $(this).val(content.substring(0, 1000));
  324. $('#ans_cnt').html("(<em class='c_primary'>1000</em>/1000자)");
  325. }
  326. });
  327. $('.etc_input').keyup(function (e){
  328. var content = $(this).val();
  329. if (content.length > 50){
  330. $(this).val(content.substring(0, 50));
  331. }
  332. });
  333. $('.form_control').keyup(function (e){
  334. var content = $(this).val();
  335. if (content.length > 50){
  336. $(this).val(content.substring(0, 50));
  337. }
  338. });
  339. $('.ev .survey_wrap .survey_con .survey_row input[type="radio"]').change(function(){
  340. if ($('.etc_radio').is(':checked')) {
  341. // $('.etc_input').removeAttr('disabled');
  342. $('.etc_input').css({'visibility': 'visible'});
  343. } else {
  344. // $('.etc_input').attr('disabled', true);
  345. $('.etc_input').css({'visibility': 'hidden'});
  346. }
  347. });
  348. });
  349. </script>
  350. </th:block>
  351. </body>
  352. </html>