Commit 5ba94c74fa6b627fed96de857d22acd0acbc5f7f
1 parent
819d8959
-Modals ready, need to fix success modal
Showing
3 changed files
with
114 additions
and
7 deletions
Show diff stats
blocks/footer_endhtml.php
@@ -202,6 +202,7 @@ _________________________________________________________ --> | @@ -202,6 +202,7 @@ _________________________________________________________ --> | ||
202 | <script src="/js/start-swipe.js"></script> | 202 | <script src="/js/start-swipe.js"></script> |
203 | <!-- owl carousel --> | 203 | <!-- owl carousel --> |
204 | <script src="js/owl.carousel.min.js"></script> | 204 | <script src="js/owl.carousel.min.js"></script> |
205 | +<script src="/js/submit.js"></script> | ||
205 | 206 | ||
206 | </body> | 207 | </body> |
207 | </html> | 208 | </html> |
208 | \ No newline at end of file | 209 | \ No newline at end of file |
blocks/modal.php
@@ -6,11 +6,11 @@ | @@ -6,11 +6,11 @@ | ||
6 | </div> | 6 | </div> |
7 | <div class="modal-body"> | 7 | <div class="modal-body"> |
8 | <form id="get-itform" action="" method="POST" role="form"> | 8 | <form id="get-itform" action="" method="POST" role="form"> |
9 | -<div class="form-group field-booknow-email required"> | 9 | +<div id="name-block" class="form-group field-booknow-email required"> |
10 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваше имя</label><input type="text" id="booknow-email" class="form-control" name="name" autocomplete="off" aria-required="true"> | 10 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваше имя</label><input type="text" id="booknow-email" class="form-control" name="name" autocomplete="off" aria-required="true"> |
11 | -</div><div class="form-group field-booknow-email required"> | 11 | +</div><div id="email-block" class="form-group field-booknow-email required"> |
12 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваш e-mail</label><input type="text" id="booknow-email" class="form-control" name="email" autocomplete="off" aria-required="true"> | 12 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваш e-mail</label><input type="text" id="booknow-email" class="form-control" name="email" autocomplete="off" aria-required="true"> |
13 | -</div><div class="form-group field-booknow-email required"> | 13 | +</div><div id="phone-block" class="form-group field-booknow-email required"> |
14 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваш телефон</label><input type="text" id="booknow-email" class="form-control" name="phone" autocomplete="off" aria-required="true"> | 14 | <div class="on_input_"></div><label class="control-label" for="booknow-email">Ваш телефон</label><input type="text" id="booknow-email" class="form-control" name="phone" autocomplete="off" aria-required="true"> |
15 | </div> | 15 | </div> |
16 | <div class="form-group field-booknow-message"> | 16 | <div class="form-group field-booknow-message"> |
@@ -27,17 +27,17 @@ | @@ -27,17 +27,17 @@ | ||
27 | <div class="overlay-new"></div> | 27 | <div class="overlay-new"></div> |
28 | </div> | 28 | </div> |
29 | 29 | ||
30 | - <div class="success_" style="display:none;"> | 30 | + <div id="success-modal" class="success_" style="display:none;"> |
31 | <div class="forms_wr_"> | 31 | <div class="forms_wr_"> |
32 | <div class="modal-header"> | 32 | <div class="modal-header"> |
33 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | 33 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
34 | - <h3 class="modal-title" id="Success">Thank you</h3> | 34 | + <h3 class="modal-title" id="Success">Спасибо за заявку</h3> |
35 | </div> | 35 | </div> |
36 | <div class="modal-body"> | 36 | <div class="modal-body"> |
37 | 37 | ||
38 | - <p class="text-center">We will send you tour information in short time!</p> | 38 | + <p class="text-center">Мы скоро с вами свяжемся.</p> |
39 | <p class="text-center"> | 39 | <p class="text-center"> |
40 | - <button type="button" class="btn btn-template-primary" data-dismiss="modal">Close</button> | 40 | + <button type="button" class="btn btn-template-primary" data-dismiss="modal">Закрыть</button> |
41 | </p> | 41 | </p> |
42 | </div> | 42 | </div> |
43 | </div> | 43 | </div> |
js/submit.js
1 | +$( | ||
2 | + function() { | ||
3 | + $(document) | ||
4 | + .on( | ||
5 | + 'submit', '#get-itform', function(e) { | ||
6 | + e.preventDefault(); | ||
7 | + var dataArray = $(this) | ||
8 | + .serializeArray(); | ||
9 | + dataArray.forEach( | ||
10 | + function(elem) { | ||
11 | + console.log(elem.name); | ||
12 | + } | ||
13 | + ); | ||
14 | + | ||
15 | + var form = this; | ||
16 | + if (validate(dataArray)) { | ||
17 | + $.ajax( | ||
18 | + { | ||
19 | + url: 'http://artbox.net.ua/en/feedback', | ||
20 | + type: "POST", | ||
21 | + data: dataArray, | ||
22 | + success: function(data) { | ||
23 | + if (data.status) { | ||
24 | + form.reset(); | ||
25 | + var pos = ($(window) | ||
26 | + .scrollTop() + 30 + 50); | ||
27 | + $('.forms_') | ||
28 | + .animate( | ||
29 | + { | ||
30 | + opacity: 0, | ||
31 | + top: '0' | ||
32 | + }, 200, function() { | ||
33 | + $(this) | ||
34 | + .css('display', 'none'); | ||
35 | + // $('#overlay').fadeOut(400); | ||
36 | + } | ||
37 | + ); | ||
38 | + $('#success-modal') | ||
39 | + .css('display', 'block') | ||
40 | + .animate( | ||
41 | + { | ||
42 | + opacity: 1, | ||
43 | + top: pos | ||
44 | + }, 200 | ||
45 | + ); | ||
46 | + } | ||
47 | + } | ||
48 | + } | ||
49 | + ); | ||
50 | + } | ||
51 | + } | ||
52 | + ); | ||
53 | + | ||
54 | + $(document) | ||
55 | + .on( | ||
56 | + 'blur', '.form-control', function() { | ||
57 | + var formData = $('#get-itform') | ||
58 | + .serializeArray(); | ||
59 | + validate(formData); | ||
60 | + } | ||
61 | + ); | ||
62 | + | ||
63 | + function validate(array) { | ||
64 | + var isValid = true; | ||
65 | + var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | ||
66 | + array.forEach( | ||
67 | + function(element) { | ||
68 | + switch (element.name) { | ||
69 | + case 'name' : | ||
70 | + if (element.value.length === 0) { | ||
71 | + $('#name-block') | ||
72 | + .addClass('has-error'); | ||
73 | + isValid = false; | ||
74 | + } else { | ||
75 | + $('#name-block') | ||
76 | + .removeClass('has-error'); | ||
77 | + } | ||
78 | + break; | ||
79 | + case 'phone' : | ||
80 | + if (element.value.length === 0) { | ||
81 | + $('#phone-block') | ||
82 | + .addClass('has-error'); | ||
83 | + isValid = false; | ||
84 | + } else { | ||
85 | + $('#phone-block') | ||
86 | + .removeClass('has-error'); | ||
87 | + } | ||
88 | + break; | ||
89 | + case 'email' : | ||
90 | + if ((element.value.length === 0) || !re.test(element.value.toLowerCase())) { | ||
91 | + $('#email-block') | ||
92 | + .addClass('has-error'); | ||
93 | + isValid = false; | ||
94 | + } else { | ||
95 | + $('#email-block') | ||
96 | + .removeClass('has-error'); | ||
97 | + } | ||
98 | + break; | ||
99 | + } | ||
100 | + } | ||
101 | + ); | ||
102 | + | ||
103 | + return isValid; | ||
104 | + } | ||
105 | + } | ||
106 | +); | ||
0 | \ No newline at end of file | 107 | \ No newline at end of file |