API tools faq
paste
afsarwebdev

Form show from select option role

afsarwebdev
Oct 23rd, 2018
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.03 KB | None | 0 0
raw download clone embed print report
  1. //Multiple form show from select option
  2. //HTML
  3. <div class="ic-user-role ">
  4. <h2>welcome to Register</h2>
  5. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lectus sapien, sed tempor elimoit blandit eget. Pellentesque dictum ante aliquam pellentesque condimentum.</p>
  6. <div class="ic-select-mform">
  7. <select id="ic-roles">
  8. <option value="0">I am (Select Your Register Type)</option>
  9. <option value="agent">I am agent</option>
  10. <option value="vendor">I am vender</option>
  11. <option value="broker">I am broker</option>
  12. </select>
  13. </div>
  14. <div id="agent" class="ic-role" style="display:none">
  15. <form action="#">
  16. <div class="ic ">
  17. <h2 class=" ">agent Registration</h2>
  18. </div>
  19. <div class="ic-label-input ">
  20. <div class="ic-label">
  21. <label for="agentFname">First name *</label>
  22. </div>
  23. <div class="ic-single-input">
  24. <input id="agentFname" type="text">
  25. </div>
  26. </div>
  27. <div class="ic-label-input ">
  28. <div class="ic-label">
  29. <label for="agentLname">Last name *</label>
  30. </div>
  31. <div class="ic-single-input">
  32. <input id="agentLname" type="text">
  33. </div>
  34. </div>
  35. <div class="ic-label-input ">
  36. <div class="ic-label">
  37. <label for="agentemail">Email address *</label>
  38. </div>
  39. <div class="ic-single-input">
  40. <input id="agentemail" type="text">
  41. </div>
  42. </div>
  43. <div class="ic-label-input ">
  44. <div class="ic-label">
  45. <label for="agentpassword">Password *</label>
  46. </div>
  47. <div class="ic-single-input">
  48. <input id="agentpassword" type="password">
  49. </div>
  50. </div>
  51. <div class="ic-label-input ">
  52. <div class="ic-label">
  53. <label for="agentcpassword">Confirm password *</label>
  54. </div>
  55. <div class="ic-single-input">
  56. <input id="agentcpassword" type="password">
  57. </div>
  58. </div>
  59. <div class="ic-label-input ">
  60. <div class="ic-label">
  61. <label for="agentreLicense">RE license *</label>
  62. </div>
  63. <div class="ic-single-input">
  64. <input id="agentreLicense" type="text">
  65. </div>
  66. </div>
  67. <div class="ic-label-input ic-zindex">
  68. <div class="ic-label">
  69. <label for="agentdatepicker">License Exp Date *</label>
  70. </div>
  71. <div class="ic-single-input ic-dbl">
  72. <input class="ic-dbl-inpt ic-datepicker" id="agentdatepicker" type="text">
  73. <span class="ic-calender-icon"><img src="assets/images/icon/ic-calender.png" alt=""></span>
  74. <div class="ic-select ic-dbl-inpt">
  75. <select>
  76. <option value="0">License State</option>
  77. <option value="1">Active</option>
  78. <option value="2">Inactive</option>
  79. </select>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="ic-label-input ">
  84. <div class="ic-label">
  85. <span id="license_img_lbl" for="file-upload2">License image *</span>
  86. </div>
  87. <div class="ic-single-input ic-dbl">
  88. <div class="ic-dbl-inpt ic-upload">
  89. <label for="agent-file-upload" class="custom-file-upload">
  90. Upload Your License
  91. </label>
  92. <input id="agent-file-upload" class="file-upload" name='upload_cont_img' type="file" style="display:none;">
  93. </div>
  94. <div class="ic-dbl-inpt">
  95. <input type="text" placeholder="Your Phone Number">
  96. </div>
  97. </div>
  98. </div>
  99. <div class="ic-label-input ">
  100. <div class="ic-label">
  101. <label for="agentcompanyName">Comapny Name*</label>
  102. </div>
  103. <div class="ic-single-input">
  104. <input id="agentcompanyName" type="text">
  105. </div>
  106. </div>
  107. <div class="ic-label-input ">
  108. <div class="ic-label">
  109. <label for="agentcompanyAddress">Comapny Address*</label>
  110. </div>
  111. <div class="ic-single-input">
  112. <input id="agentcompanyAddress" type="text">
  113. </div>
  114. </div>
  115. <div class="ic-label-input ">
  116. <div class="ic-label">
  117. <label for="agentcompanyWebsite">Comapny Website</label>
  118. </div>
  119. <div class="ic-single-input">
  120. <input id="agentcompanyWebsite" type="text">
  121. </div>
  122. </div>
  123. <div class="ic-label-input ic-zindex">
  124. <div class="ic-label">
  125. <label for="agentcity">City *</label>
  126. </div>
  127. <div class="ic-single-input ic-dbl">
  128. <input class="ic-dbl-inpt" id="agentcity" type="text">
  129. <div class="ic-select ic-dbl-inpt">
  130. <select>
  131. <option value="0">State</option>
  132. <option value="1">Alabama</option>
  133. <option value="2">Alaska</option>
  134. <option value="3">Florida</option>
  135. <option value="4">Georgia</option>
  136. <option value="5">Illinois</option>
  137. <option value="6">Iowa</option>
  138. </select>
  139. </div>
  140. </div>
  141. </div>
  142.  
  143. <!-- <div class="ic-label-input">
  144. <div class="ic-label">
  145. <span class="d-none">Captcha</span>
  146. </div>
  147. <div class="ic-single-input">
  148. <div class="recaptcha-wrap">
  149. <div id="g-recaptcha"></div>
  150. </div>
  151. </div>
  152. </div> -->
  153. <div class="ic-label-input ic-sm-reg-agent-col">
  154. <div class="ic-label">
  155. <span class="d-none">Term of use</span>
  156. </div>
  157. <div class="ic-single-input">
  158. <div class="ic-checkbox">
  159. <label>
  160. <input type="checkbox">
  161. <span class="checkmark"></span>
  162. </label>
  163. <span>I agree to the <a href="#">Privacy Statement</a> and <a href="#">Terms of</a> Use governing your registration.</span>
  164. </div>
  165. <div class="ic-submit">
  166. <button id="submit-reg-form" class="ic-btn ic-popup-show" data-toggle="modal" data-target="#ic_cheer">Register</button>
  167. <div class="modal fade ic-cheer" id="ic_cheer" tabindex="-1" role="dialog" aria-labelledby="cheerLabel" aria-hidden="true">
  168. <div class="modal-dialog modal-dialog-centered" role="document">
  169. <div class="modal-content">
  170. <div class="modal-body">
  171. <h3>Registeration Successful</h3>
  172. <span class="ic-check"><i class="icofont icofont-check-circled"></i></span>
  173. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lectus sapien, sed tempor elit blandit eget. Pellentesque dictum ante aliquam pellentesque condimentum.</p>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </form>
  182. </div>
  183. <div id="vendor" class="ic-role" style="display:none">
  184. <form action="#">
  185. <h2 class=" ">Vendor Registration</h2>
  186. <div class="ic-label-input ">
  187. <div class="ic-label">
  188. <label for="vendorFname">First name *</label>
  189. </div>
  190. <div class="ic-single-input">
  191. <input id="vendorFname" type="text">
  192. </div>
  193. </div>
  194. <div class="ic-label-input ">
  195. <div class="ic-label">
  196. <label for="vendorLname">Last name *</label>
  197. </div>
  198. <div class="ic-single-input">
  199. <input id="vendorLname" type="text">
  200. </div>
  201. </div>
  202. <div class="ic-label-input ">
  203. <div class="ic-label">
  204. <label for="vendoremail">Email address *</label>
  205. </div>
  206. <div class="ic-single-input">
  207. <input id="vendoremail" type="text">
  208. </div>
  209. </div>
  210. <div class="ic-label-input ">
  211. <div class="ic-label">
  212. <label for="vendorpassword">Password *</label>
  213. </div>
  214. <div class="ic-single-input">
  215. <input id="vendorpassword" type="password">
  216. </div>
  217. </div>
  218.  
  219. <div class="ic-label-input ">
  220. <div class="ic-label">
  221. <label for="vendorcpassword">Confirm password *</label>
  222. </div>
  223. <div class="ic-single-input">
  224. <input id="vendorcpassword" type="password">
  225. </div>
  226. </div>
  227. <div class="ic-label-input ">
  228. <div class="ic-label">
  229. <label for="vendorreLicense">RE license *</label>
  230. </div>
  231. <div class="ic-single-input">
  232. <input id="vendorreLicense" type="text">
  233. </div>
  234. </div>
  235. <div class="ic-label-input ic-zindex">
  236. <div class="ic-label">
  237. <label for="vendordatepicker">License Exp Date *</label>
  238. </div>
  239. <div class="ic-single-input ic-dbl">
  240. <input class="ic-dbl-inpt ic-datepicker" id="vendordatepicker" type="text">
  241. <span class="ic-calender-icon"><img src="assets/images/icon/ic-calender.png" alt=""></span>
  242. <div class="ic-select ic-dbl-inpt">
  243. <select>
  244. <option value="0">License State</option>
  245. <option value="1">Active</option>
  246. <option value="2">Inactive</option>
  247. </select>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="ic-label-input ">
  252. <div class="ic-label">
  253. <span id="license_img_lbl" for="file-upload2">License image *</span>
  254. </div>
  255. <div class="ic-single-input ic-dbl">
  256. <div class="ic-dbl-inpt ic-upload">
  257. <label for="vendor-file-upload" class="custom-file-upload">
  258. Upload Your License
  259. </label>
  260. <input id="vendor-file-upload" class="file-upload" name='upload_cont_img' type="file" style="display:none;">
  261. </div>
  262. <div class="ic-dbl-inpt">
  263. <input type="text" placeholder="Your Phone Number">
  264. </div>
  265. </div>
  266. </div>
  267. <div class="ic-label-input ">
  268. <div class="ic-label">
  269. <label for="vendorcompanyName">Comapny Name*</label>
  270. </div>
  271. <div class="ic-single-input">
  272. <input id="vendorcompanyName" type="text">
  273. </div>
  274. </div>
  275. <div class="ic-label-input ">
  276. <div class="ic-label">
  277. <label for="vendorcompanyAddress">Comapny Address*</label>
  278. </div>
  279. <div class="ic-single-input">
  280. <input id="vendorcompanyAddress" type="text">
  281. </div>
  282. </div>
  283. <div class="ic-label-input ">
  284. <div class="ic-label">
  285. <label for="vendorcompanyWebsite">Comapny Website</label>
  286. </div>
  287. <div class="ic-single-input">
  288. <input id="vendorcompanyWebsite" type="text">
  289. </div>
  290. </div>
  291. <div class="ic-label-input ic-zindex">
  292. <div class="ic-label">
  293. <label for="vendorcity">City *</label>
  294. </div>
  295. <div class="ic-single-input ic-dbl">
  296. <input class="ic-dbl-inpt" id="vendorcity" type="text">
  297. <div class="ic-select ic-dbl-inpt">
  298. <select>
  299. <option value="0">State</option>
  300. <option value="1">Alabama</option>
  301. <option value="2">Alaska</option>
  302. <option value="3">Florida</option>
  303. <option value="4">Georgia</option>
  304. <option value="5">Illinois</option>
  305. <option value="6">Iowa</option>
  306. </select>
  307. </div>
  308. </div>
  309. </div>
  310.  
  311. <!-- <div class="ic-label-input">
  312. <div class="ic-label">
  313. <span class="d-none">Captcha</span>
  314. </div>
  315. <div class="ic-single-input">
  316. <div class="recaptcha-wrap">
  317. <div id="g-recaptcha"></div>
  318. </div>
  319. </div>
  320. </div> -->
  321. <div class="ic-label-input ic-sm-reg-agent-col">
  322. <div class="ic-label">
  323. <span class="d-none">Term of use</span>
  324. </div>
  325. <div class="ic-single-input">
  326. <div class="ic-checkbox">
  327. <label>
  328. <input type="checkbox">
  329. <span class="checkmark"></span>
  330. </label>
  331. <span>I agree to the <a href="#">Privacy Statement</a> and <a href="#">Terms of</a> Use governing your registration.</span>
  332. </div>
  333. <div class="ic-submit">
  334. <button id="agent-submit-reg-form" class="ic-btn ic-popup-show" data-toggle="modal" data-target="#ic_cheer2">Register</button>
  335. <div class="modal fade ic-cheer" id="ic_cheer2" tabindex="-1" role="dialog" aria-labelledby="cheerLabel" aria-hidden="true">
  336. <div class="modal-dialog modal-dialog-centered" role="document">
  337. <div class="modal-content">
  338. <div class="modal-body">
  339. <h3>Registeration Successful</h3>
  340. <span class="ic-check"><i class="icofont icofont-check-circled"></i></span>
  341. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lectus sapien, sed tempor elit blandit eget. Pellentesque dictum ante aliquam pellentesque condimentum.</p>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. </form>
  350. </div>
  351. <div id="broker" class="ic-role" style="display:none">
  352. <form action="#">
  353. <h2 class=" ">Broker Registration</h2>
  354. <div class="ic-label-input ">
  355. <div class="ic-label">
  356. <label for="brokerFname">First name *</label>
  357. </div>
  358. <div class="ic-single-input">
  359. <input id="brokerFname" type="text">
  360. </div>
  361. </div>
  362. <div class="ic-label-input ">
  363. <div class="ic-label">
  364. <label for="brokerLname">Last name *</label>
  365. </div>
  366. <div class="ic-single-input">
  367. <input id="brokerLname" type="text">
  368. </div>
  369. </div>
  370. <div class="ic-label-input ">
  371. <div class="ic-label">
  372. <label for="brokeremail">Email address *</label>
  373. </div>
  374. <div class="ic-single-input">
  375. <input id="brokeremail" type="text">
  376. </div>
  377. </div>
  378. <div class="ic-label-input ">
  379. <div class="ic-label">
  380. <label for="brokerpassword">Password *</label>
  381. </div>
  382. <div class="ic-single-input">
  383. <input id="brokerpassword" type="password">
  384. </div>
  385. </div>
  386.  
  387. <div class="ic-label-input ">
  388. <div class="ic-label">
  389. <label for="brokercpassword">Confirm password *</label>
  390. </div>
  391. <div class="ic-single-input">
  392. <input id="brokercpassword" type="password">
  393. </div>
  394. </div>
  395. <div class="ic-label-input ">
  396. <div class="ic-label">
  397. <label for="brokerreLicense">RE license *</label>
  398. </div>
  399. <div class="ic-single-input">
  400. <input id="brokerreLicense" type="text">
  401. </div>
  402. </div>
  403. <div class="ic-label-input ic-zindex">
  404. <div class="ic-label">
  405. <label for="brokerdatepicker">License Exp Date *</label>
  406. </div>
  407. <div class="ic-single-input ic-dbl">
  408. <input class="ic-dbl-inpt ic-datepicker" id="brokerdatepicker" type="text">
  409. <span class="ic-calender-icon"><img src="assets/images/icon/ic-calender.png" alt=""></span>
  410. <div class="ic-select ic-dbl-inpt">
  411. <select>
  412. <option value="0">License State</option>
  413. <option value="1">Active</option>
  414. <option value="2">Inactive</option>
  415. </select>
  416. </div>
  417. </div>
  418. </div>
  419. <div class="ic-label-input ">
  420. <div class="ic-label">
  421. <span id="license_img_lbl" for="file-upload2">License image *</span>
  422. </div>
  423. <div class="ic-single-input ic-dbl">
  424. <div class="ic-dbl-inpt ic-upload">
  425. <label for="broker-file-upload" class="custom-file-upload">
  426. Upload Your License
  427. </label>
  428. <input id="broker-file-upload" class="file-upload" name='upload_cont_img' type="file" style="display:none;">
  429. </div>
  430. <div class="ic-dbl-inpt">
  431. <input type="text" placeholder="Your Phone Number">
  432. </div>
  433. </div>
  434. </div>
  435. <div class="ic-label-input ">
  436. <div class="ic-label">
  437. <label for="brokercompanyName">Comapny Name*</label>
  438. </div>
  439. <div class="ic-single-input">
  440. <input id="brokercompanyName" type="text">
  441. </div>
  442. </div>
  443. <div class="ic-label-input ">
  444. <div class="ic-label">
  445. <label for="brokercompanyAddress">Comapny Address*</label>
  446. </div>
  447. <div class="ic-single-input">
  448. <input id="brokercompanyAddress" type="text">
  449. </div>
  450. </div>
  451. <div class="ic-label-input ">
  452. <div class="ic-label">
  453. <label for="brokercompanyWebsite">Comapny Website</label>
  454. </div>
  455. <div class="ic-single-input">
  456. <input id="brokercompanyWebsite" type="text">
  457. </div>
  458. </div>
  459. <div class="ic-label-input ic-zindex">
  460. <div class="ic-label">
  461. <label for="brokercity">City *</label>
  462. </div>
  463. <div class="ic-single-input ic-dbl">
  464. <input class="ic-dbl-inpt" id="brokercity" type="text">
  465. <div class="ic-select ic-dbl-inpt">
  466. <select>
  467. <option value="0">State</option>
  468. <option value="1">Alabama</option>
  469. <option value="2">Alaska</option>
  470. <option value="3">Florida</option>
  471. <option value="4">Georgia</option>
  472. <option value="5">Illinois</option>
  473. <option value="6">Iowa</option>
  474. </select>
  475. </div>
  476. </div>
  477. </div>
  478.  
  479. <!-- <div class="ic-label-input">
  480. <div class="ic-label">
  481. <span class="d-none">Captcha</span>
  482. </div>
  483. <div class="ic-single-input">
  484. <div class="recaptcha-wrap">
  485. <div id="g-recaptcha"></div>
  486. </div>
  487. </div>
  488. </div> -->
  489. <div class="ic-label-input ic-sm-reg-agent-col">
  490. <div class="ic-label">
  491. <span class="d-none">Term of use</span>
  492. </div>
  493. <div class="ic-single-input">
  494. <div class="ic-checkbox">
  495. <label>
  496. <input type="checkbox">
  497. <span class="checkmark"></span>
  498. </label>
  499. <span>I agree to the <a href="#">Privacy Statement</a> and <a href="#">Terms of</a> Use governing your registration.</span>
  500. </div>
  501. <div class="ic-submit">
  502. <button id="broker-submit-reg-form" class="ic-btn ic-popup-show" data-toggle="modal" data-target="#ic_cheer3">Register</button>
  503. <div class="modal fade ic-cheer" id="ic_cheer3" tabindex="-1" role="dialog" aria-labelledby="cheerLabel" aria-hidden="true">
  504. <div class="modal-dialog modal-dialog-centered" role="document">
  505. <div class="modal-content">
  506. <div class="modal-body">
  507. <h3>Registeration Successful</h3>
  508. <span class="ic-check"><i class="icofont icofont-check-circled"></i></span>
  509. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lectus sapien, sed tempor elit blandit eget. Pellentesque dictum ante aliquam pellentesque condimentum.</p>
  510. </div>
  511. </div>
  512. </div>
  513. </div>
  514. </div>
  515. </div>
  516. </div>
  517. </form>
  518. </div>
  519. <div class="ic-account-sign">
  520. <span>All Ready Have An Account? Please <a href="#">Sign In</a> Here</span>
  521. </div>
  522. </div>
  523. //CSS
  524. #ic-user-agent .ic-user-role {
  525. padding: 80px;
  526. }
  527. .ic-user-info {
  528. padding: 270px 0px;
  529. }
  530. .ic-user-role .ic-select {
  531. margin-bottom: 35px;
  532. }
  533. .ic-user-role .select-selected,
  534. .ic-user-role .select-items {
  535. background-color: #f9f9f9;
  536. }
  537. .ic-user-role .select-selected {
  538. border-color: #f9f9f9;
  539. }
  540. .ic-user-role .select-items div {
  541. border-color: rgba(0, 0, 0, 0.03);
  542. }
  543. .ic-user-role .select-selected.select-arrow-active:after,
  544. .ic-user-role .select-selected:before {
  545. border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  546. }
  547. .ic-user-role .select-items div {
  548. color: #393939;
  549. }
  550. .ic-user-info {
  551. background-image: url('../images/bg/register_agent_body_bg.jpg');
  552. }
  553. .ic-user-role {
  554. background-color: #fff;
  555. padding: 80px 125px;
  556. text-align: center;
  557. box-shadow: 4px 8px 16px rgba(56, 118, 188, 0.25);
  558. }
  559. .ic-user-role h2 {
  560. font-size: 30px;
  561. font-weight: 700;
  562. text-transform: uppercase;
  563. color: #3876bc;
  564. margin-bottom: 25px;
  565. }
  566. .ic-user-role p {
  567. margin-bottom: 75px;
  568. }
  569. .ic-account-sign span a {
  570. border-bottom: 1px solid #3876bc;
  571. color: #3876bc;
  572. }
  573. .ic-label-input .ic-label {
  574. width: 30%;
  575. float: left;
  576. text-align: left;
  577. }
  578. .ic-label-input .ic-single-input {
  579. width: 70%;
  580. float: right;
  581. position: relative;
  582. }
  583. .ic-label-input {
  584. display: flex;
  585. align-items: center;
  586. margin-bottom: 20px;
  587. }
  588. .ic-label-input:last-child {
  589. margin-bottom: 0px;
  590. }
  591. .ic-label-input label {
  592. margin-bottom: 0px;
  593. }
  594. .ic-single-input input {
  595. background-color: #f9f9f9;
  596. border-color: #f9f9f9;
  597. padding: 0px 15px;
  598. }
  599. .ic-single-input input:focus {
  600. border-color: #3876bc;
  601. }
  602. .ic-label label,
  603. .ic-label #license_img_lbl {
  604. text-transform: capitalize;
  605. font-weight: 500;
  606. }
  607. .ic-user-info.ic-ptb {
  608. padding: 80px 0;
  609. }
  610. .ic-single-input.ic-dbl .ic-dbl-inpt {
  611. width: 47%;
  612. float: left;
  613. }
  614. .ic-single-input.ic-dbl .ic-dbl-inpt:last-child {
  615. float: right;
  616. }
  617. #ic-user-agent .ic-user-role .ic-select {
  618. margin-bottom: 0px;
  619. }
  620. .ic-label #license_img_lbl {
  621. cursor: context-menu;
  622. }
  623. .ic-upload {
  624. height: 50px;
  625. line-height: 50px;
  626. background-color: #3876bc;
  627. color: #fff;
  628. cursor: pointer;
  629. padding: 0 15px;
  630. text-overflow: ellipsis;
  631. overflow: hidden;
  632. }
  633. .ic-upload label {
  634. width: 100%;
  635. cursor: pointer;
  636. }
  637. .ic-label-input ::-webkit-input-placeholder {
  638. color: #393939;
  639. }
  640. .ic-label-input ::-moz-placeholder {
  641. color: #393939;
  642. }
  643. .ic-label-input :-ms-input-placeholder {
  644. color: #393939;
  645. }
  646. .ic-label-input :-moz-placeholder {
  647. color: #393939;
  648. }
  649. .ic-checkbox>span a {
  650. color: #3876bc;
  651. }
  652. .ic-submit .ic-btn {
  653. width: 100%;
  654. text-transform: uppercase;
  655. font-weight: 500;
  656. background-color: #3876bc;
  657. }
  658. .ic-submit {
  659. margin-bottom: 35px;
  660. }
  661. .ic-calender-icon {
  662. position: absolute;
  663. right: 56%;
  664. top: 15px;
  665. opacity: 1;
  666. visibility: visible;
  667. transition: all 0.4s;
  668. }
  669. .ic-cal-hide {
  670. opacity: 0;
  671. visibility: hidden;
  672. }
  673. /*thankyou popup*/
  674. .ic-cheer h3 {
  675. font-size: 30px;
  676. font-weight: 700;
  677. text-transform: uppercase;
  678. color: #3876bc;
  679. }
  680. .ic-cheer .modal-dialog {
  681. max-width: 790px;
  682. }
  683. .ic-cheer .ic-check {
  684. font-size: 72px;
  685. color: #3876bc;
  686. margin-bottom: 25px;
  687. display: block;
  688. }
  689. .ic-cheer p {
  690. color: #3876bc;
  691. margin-bottom: 0px;
  692. }
  693. .ic-cheer .modal-body {
  694. padding: 100px;
  695. }
  696. .ic-user-role .ic.animatedParent {
  697. margin-bottom: 20px;
  698. }
  699. .ic-user-role .ic.animatedParent:last-child {
  700. margin-bottom: 0px;
  701. }
  702. #ic-roles {
  703. width: 100%;
  704. border: none;
  705. background-color: #f9f9f9;
  706. padding: 16px 20px;
  707. outline: none;
  708. margin-bottom: 40px;
  709. -webkit-appearance: none;
  710. background-image: url('../images/icon/arrow_icon.png');
  711. background-repeat: no-repeat;
  712. background-position-x: 96%;
  713. background-position-y: 60%;
  714. background-size: 30px;
  715. }
  716. //JS
  717. var x, i, j, selElmnt, a, b, c;
  718. /*look for any elements with the class "ic-select":*/
  719. x = document.getElementsByClassName("ic-select-mform");
  720. for (i = 0; i < x.length; i++) {
  721. selElmnt = x[i].getElementsByTagName("select")[0];
  722. /*for each element, create a new DIV that will act as the selected item:*/
  723. a = document.createElement("DIV");
  724. a.setAttribute("class", "select-selected");
  725. a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  726. x[i].appendChild(a);
  727. /*for each element, create a new DIV that will contain the option list:*/
  728. b = document.createElement("DIV");
  729. b.setAttribute("class", "select-items select-hide");
  730.  
  731. for (j = 0; j < selElmnt.length; j++) {
  732.  
  733. /*for each option in the original select element,
  734. create a new DIV that will act as an option item:*/
  735. c = document.createElement("DIV");
  736. c.innerHTML = selElmnt.options[j].innerHTML;
  737. c.setAttribute("data-target", selElmnt.options[j].value);
  738. c.addEventListener("click", function(e) {
  739. var dataRole=$(this).data("target");
  740. $('.ic-role').hide();
  741. $('#' + dataRole).show();
  742. // alert(testData);
  743.  
  744. /*when an item is clicked, update the original select box,
  745. and the selected item:*/
  746. var y, i, k, s, h;
  747. s = this.parentNode.parentNode.getElementsByTagName("select")[0];
  748. h = this.parentNode.previousSibling;
  749. for (i = 0; i < s.length; i++) {
  750. // console.log()
  751. if (s.options[i].innerHTML == this.innerHTML) {
  752. s.selectedIndex = i;
  753. h.innerHTML = this.innerHTML;
  754. y = this.parentNode.getElementsByClassName("same-as-selected");
  755. for (k = 0; k < y.length; k++) {
  756. y[k].removeAttribute("class");
  757. }
  758. this.setAttribute("class", "same-as-selected");
  759. break;
  760. }
  761. }
  762. h.click();
  763. });
  764. b.appendChild(c);
  765. }
  766. x[i].appendChild(b);
  767. a.addEventListener("click", function(e) {
  768. /*when the select box is clicked, close any other select boxes,
  769. and open/close the current select box:*/
  770. e.stopPropagation();
  771. closeAllSelect(this);
  772. this.nextSibling.classList.toggle("select-hide");
  773. this.classList.toggle("select-arrow-active");
  774. });
  775. }
  776. function closeAllSelect(elmnt) {
  777. /*a function that will close all select boxes in the document,
  778. except the current select box:*/
  779. var x, y, i, arrNo = [];
  780. x = document.getElementsByClassName("select-items");
  781. y = document.getElementsByClassName("select-selected");
  782. for (i = 0; i < y.length; i++) {
  783. if (elmnt == y[i]) {
  784. arrNo.push(i)
  785. } else {
  786. y[i].classList.remove("select-arrow-active");
  787. }
  788. }
  789. for (i = 0; i < x.length; i++) {
  790. if (arrNo.indexOf(i)) {
  791. x[i].classList.add("select-hide");
  792. }
  793. }
  794. }
  795. /*if the user clicks anywhere outside the select box,
  796. then close all select boxes:*/
  797. document.addEventListener("click", closeAllSelect);
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!