Ajax-Form-Js

ajax-javascript-form

<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>