Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.