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 | 202 | <script src="/js/start-swipe.js"></script> |
203 | 203 | <!-- owl carousel --> |
204 | 204 | <script src="js/owl.carousel.min.js"></script> |
205 | +<script src="/js/submit.js"></script> | |
205 | 206 | |
206 | 207 | </body> |
207 | 208 | </html> |
208 | 209 | \ No newline at end of file | ... | ... |
blocks/modal.php
... | ... | @@ -6,11 +6,11 @@ |
6 | 6 | </div> |
7 | 7 | <div class="modal-body"> |
8 | 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 | 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 | 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 | 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 | 15 | </div> |
16 | 16 | <div class="form-group field-booknow-message"> |
... | ... | @@ -27,17 +27,17 @@ |
27 | 27 | <div class="overlay-new"></div> |
28 | 28 | </div> |
29 | 29 | |
30 | - <div class="success_" style="display:none;"> | |
30 | + <div id="success-modal" class="success_" style="display:none;"> | |
31 | 31 | <div class="forms_wr_"> |
32 | 32 | <div class="modal-header"> |
33 | 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 | 35 | </div> |
36 | 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 | 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 | 41 | </p> |
42 | 42 | </div> |
43 | 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 | 107 | \ No newline at end of file | ... | ... |