Ajax-Form-Js
<script> | |
$("form.form").submit(function () { | |
let th = $(this); | |
let inputNumber = th.find('input[name=tel]').val(); | |
if(inputNumber.length < 17) return false; | |
th.find('button[type="submit"]').attr('disabled', 'true'); | |
$.ajax({ | |
type: th.attr('method'), | |
url: th.attr('action'), | |
data: th.serialize(), | |
beforeSend: function() { | |
$(th).find('.loader').addClass('active'); | |
}, | |
complete: function() { | |
$(th).find('.loader').removeClass('active'); | |
} | |
}).done(function () { | |
$(th).find('.success').addClass('active').css('display', 'flex').hide().fadeIn(); | |
setTimeout(function () { | |
$(th).find('.success').removeClass('active').fadeOut(); | |
// Done Functions | |
th.trigger("reset"); | |
$(th).find('button[type="submit"]').removeAttr('disabled'); | |
$.magnificPopup.proto.close.call(this); | |
}, 3000); | |
}).fail(function() { | |
$(th).find('.fail').addClass('active').css('display', 'flex').hide().fadeIn(); | |
setTimeout(function () { | |
$(th).find('.fail').removeClass('active').fadeOut(); | |
// Done Functions | |
th.trigger("reset"); | |
$(th).find('button[type="submit"]').removeAttr('disabled'); | |
$.magnificPopup.proto.close.call(this); | |
}, 3000); | |
}); | |
return false; | |
}); | |
</script> | |
<div class="loader"><img src="./img/loader.gif" /></div> | |
<div class="success"><span>Спасибо за заявку</span></div> | |
<div class="fail"><span>Что то пошло не так</span></div> | |
<!-- Hidden Required Fields --> | |
<input type="hidden" name="project_name" value="WhyNot"> | |
<input type="hidden" name="admin_email" value="privetwhynot@gmail.com"> | |
<input type="hidden" name="form_subject" value="Заявка"> | |
<!-- END Hidden Required Fields --> | |
<style> | |
.success, | |
.fail { | |
display: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
text-transform: uppercase; | |
font-weight: 700; | |
z-index: 10; | |
span { | |
margin: auto; | |
color: #000; | |
font-size: 28px; | |
letter-spacing: 0.3px; | |
} | |
~* { | |
transition: all 0.5s ease; | |
} | |
&.active~* { | |
opacity: 0.6; | |
transition: all 0.5s ease; | |
filter: blur(10px); | |
} | |
} | |
.loader { | |
display: none; | |
position: absolute; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
top: 50%; | |
left: 50%; | |
width: 100%; | |
height: 100%; | |
transform: translate(-50%, -50%); | |
border-radius: 12px; | |
background: #fff; | |
z-index: 2; | |
transition: all 0.5s ease; | |
opacity: 0; | |
pointer-events: none; | |
&.active { | |
display: flex; | |
opacity: 1; | |
} | |
img { | |
display: block; | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment