Не пойму как доработать форму?

Question

Всем привет!

Есть такая вот форма codepen

Логика следующая:

Пользователь нажимает на кнопку и ему открывается форма, где он может зарезервировать дату либо же просто перейти в мессенджер. В случае если пользователь хочет зарезервировать дату на сайте он вводит имя и емейл и нажимает на кнопку резервировать, дальше должна открываться форма где уже емейл и имя заполнены(то есть они перенесены с предыдущей формы) и тут уже заполняются дальше все пункты на основании которых рассчитывается стоимость и скидка.

$('.send-one').click(function(){
    $('#form-value-3').val( $('#form-value-1').val() );
    $('#form-value-4').val( $('#form-value-2').val() );
});

.btn-to-form {
  display: flex;
  align-items: center;
}
.btn-to-form a {
  width: 251px;
  height: 60px;
  margin: 0 auto;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #F61067;
  border-radius: 36px;
  color: #FFFFFF;
  text-decoration: none;
  transition: 0.3s ease;
}
.btn-to-form a:hover {
  -webkit-box-shadow: 0px 7px 29px -4px #f61067;
  -moz-box-shadow: 0px 7px 29px -4px #f61067;
  box-shadow: 0px 7px 29px -4px #f61067;
  transition: 0.3s ease;
}

.form-popup-one, .form-popup-two {
  display: none;
  max-width: 648px;
  min-height: 769px;
  background: #150433;
}
.form-popup-one .title-form, .form-popup-two .title-form {
  display: block;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 27px;
  color: #FCFCFC;
  text-align: center;
}
#modal-form-one{
  background: #150433;
}
#modal-form-two{
  background: #150433;
}
.form-popup-one .form-one, .form-popup-one .form-two, .form-popup-two .form-one, .form-popup-two .form-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70px;
}
.form-popup-one .form-one .title-and-input, .form-popup-one .form-two .title-and-input, .form-popup-two .form-one .title-and-input, .form-popup-two .form-two .title-and-input {
  margin-bottom: 20px;
}
.form-popup-one .form-one .title-and-input .title-input, .form-popup-one .form-two .title-and-input .title-input, .form-popup-two .form-one .title-and-input .title-input, .form-popup-two .form-two .title-and-input .title-input {
  display: block;
  text-align: left;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 33px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #FCFCFC;
  margin-bottom: 20px;
}
.form-popup-one .form-one .title-and-input input, .form-popup-one .form-two .title-and-input input, .form-popup-two .form-one .title-and-input input, .form-popup-two .form-two .title-and-input input {
  width: 450px;
  height: 59px;
  outline: none;
  border: none;
  background: #ffffff;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16.2px;
  line-height: 26px;
  color: #000000;
  text-indent: 19px;
}
.form-popup-one .form-one .title-and-input input::-webkit-input-placeholder, .form-popup-one .form-two .title-and-input input::-webkit-input-placeholder, .form-popup-two .form-one .title-and-input input::-webkit-input-placeholder, .form-popup-two .form-two .title-and-input input::-webkit-input-placeholder {
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16.2px;
  line-height: 26px;
  color: #9B94A3;
  opacity: 0.5;
}
.form-popup-one .form-one .title-and-input input::-moz-placeholder, .form-popup-one .form-two .title-and-input input::-moz-placeholder, .form-popup-two .form-one .title-and-input input::-moz-placeholder, .form-popup-two .form-two .title-and-input input::-moz-placeholder {
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16.2px;
  line-height: 26px;
  color: #9B94A3;
  opacity: 0.5;
}
.form-popup-one .form-one .title-and-input input:-moz-placeholder, .form-popup-one .form-two .title-and-input input:-moz-placeholder, .form-popup-two .form-one .title-and-input input:-moz-placeholder, .form-popup-two .form-two .title-and-input input:-moz-placeholder {
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16.2px;
  line-height: 26px;
  color: #9B94A3;
  opacity: 0.5;
}
.form-popup-one .form-one .title-and-input input:-ms-input-placeholder, .form-popup-one .form-two .title-and-input input:-ms-input-placeholder, .form-popup-two .form-one .title-and-input input:-ms-input-placeholder, .form-popup-two .form-two .title-and-input input:-ms-input-placeholder {
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16.2px;
  line-height: 26px;
  color: #9B94A3;
  opacity: 0.5;
}
.form-popup-one .form-one .title-and-input input:focus::-webkit-input-placeholder, .form-popup-one .form-two .title-and-input input:focus::-webkit-input-placeholder, .form-popup-two .form-one .title-and-input input:focus::-webkit-input-placeholder, .form-popup-two .form-two .title-and-input input:focus::-webkit-input-placeholder {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form-popup-one .form-one .title-and-input input:focus::-moz-placeholder, .form-popup-one .form-two .title-and-input input:focus::-moz-placeholder, .form-popup-two .form-one .title-and-input input:focus::-moz-placeholder, .form-popup-two .form-two .title-and-input input:focus::-moz-placeholder {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form-popup-one .form-one .title-and-input input:focus:-moz-placeholder, .form-popup-one .form-two .title-and-input input:focus:-moz-placeholder, .form-popup-two .form-one .title-and-input input:focus:-moz-placeholder, .form-popup-two .form-two .title-and-input input:focus:-moz-placeholder {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form-popup-one .form-one .title-and-input input:focus:-ms-input-placeholder, .form-popup-one .form-two .title-and-input input:focus:-ms-input-placeholder, .form-popup-two .form-one .title-and-input input:focus:-ms-input-placeholder, .form-popup-two .form-two .title-and-input input:focus:-ms-input-placeholder {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form-popup-one .form-one .title-and-input input::-webkit-calendar-picker-indicator, .form-popup-one .form-two .title-and-input input::-webkit-calendar-picker-indicator, .form-popup-two .form-one .title-and-input input::-webkit-calendar-picker-indicator, .form-popup-two .form-two .title-and-input input::-webkit-calendar-picker-indicator {
  color: transparent;
  opacity: 1;
  background-size: contain;
  cursor: pointer;
  margin-right: 20px;
}
.form-popup-one .form-one .title-and-input .date, .form-popup-one .form-two .title-and-input .date, .form-popup-two .form-one .title-and-input .date, .form-popup-two .form-two .title-and-input .date {
  font-family: 'M PLUS 1p', sans-serif;
  text-indent: 11px;
}
.form-popup-one .form-one .title-and-input .input-success, .form-popup-one .form-two .title-and-input .input-success, .form-popup-two .form-one .title-and-input .input-success, .form-popup-two .form-two .title-and-input .input-success {
  position: relative;
}
.form-popup-one .form-one .title-and-input .input-success .icon-form-true, .form-popup-one .form-two .title-and-input .input-success .icon-form-true, .form-popup-two .form-one .title-and-input .input-success .icon-form-true, .form-popup-two .form-two .title-and-input .input-success .icon-form-true {
  position: absolute;
  right: 20px;
  top: 15px;
}
.form-popup-one .form-one .price, .form-popup-one .form-two .price, .form-popup-two .form-one .price, .form-popup-two .form-two .price {
  width: 450px;
  margin: 15px 0 10px 0;
}
.form-popup-one .form-one .price .title-price, .form-popup-one .form-one .price .total-price, .form-popup-one .form-one .price .discout__title, .form-popup-one .form-one .price .total-discount, .form-popup-one .form-two .price .title-price, .form-popup-one .form-two .price .total-price, .form-popup-one .form-two .price .discout__title, .form-popup-one .form-two .price .total-discount, .form-popup-two .form-one .price .title-price, .form-popup-two .form-one .price .total-price, .form-popup-two .form-one .price .discout__title, .form-popup-two .form-one .price .total-discount, .form-popup-two .form-two .price .title-price, .form-popup-two .form-two .price .total-price, .form-popup-two .form-two .price .discout__title, .form-popup-two .form-two .price .total-discount {
  font-family: 'M PLUS 1p', sans-serif;
}
.form-popup-one .form-one .price .wrapp-price .title-price, .form-popup-one .form-two .price .wrapp-price .title-price, .form-popup-two .form-one .price .wrapp-price .title-price, .form-popup-two .form-two .price .wrapp-price .title-price {
  font-style: normal;
  font-weight: 800;
  font-size: 23px;
  color: #FFFFFF;
}
.form-popup-one .form-one .price .wrapp-price .total-price, .form-popup-one .form-two .price .wrapp-price .total-price, .form-popup-two .form-one .price .wrapp-price .total-price, .form-popup-two .form-two .price .wrapp-price .total-price {
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  color: #00F0B5;
}
.form-popup-one .form-one .price .discount, .form-popup-one .form-two .price .discount, .form-popup-two .form-one .price .discount, .form-popup-two .form-two .price .discount {
  margin-top: 15px;
}
.form-popup-one .form-one .price .discount .discount__title, .form-popup-one .form-two .price .discount .discount__title, .form-popup-two .form-one .price .discount .discount__title, .form-popup-two .form-two .price .discount .discount__title {
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  color: #CC0000;
}
.form-popup-one .form-one .price .discount .total-discount, .form-popup-one .form-two .price .discount .total-discount, .form-popup-two .form-one .price .discount .total-discount, .form-popup-two .form-two .price .discount .total-discount {
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  color: #F67110;
}
.form-popup-one .form-one button, .form-popup-one .form-two button, .form-popup-two .form-one button, .form-popup-two .form-two button {
  width: 226px;
  height: 59px;
  background: #F61067;
  border-radius: 36px;
  outline: none;
  border: none;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  color: #FCFCFC;
  cursor: pointer;
  margin: 21px 0 0 0;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
}
.form-popup-one .form-one button:hover, .form-popup-one .form-two button:hover, .form-popup-two .form-one button:hover, .form-popup-two .form-two button:hover {
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.form-popup-one .form-one button:focus, .form-popup-one .form-two button:focus, .form-popup-two .form-one button:focus, .form-popup-two .form-two button:focus {
  outline: 0;
}
.form-popup-one .form-one button:active, .form-popup-one .form-two button:active, .form-popup-two .form-one button:active, .form-popup-two .form-two button:active {
  transform: scale(0.9);
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.form-popup-one .info-block, .form-popup-two .info-block {
  width: 100%;
  margin-top: 40px;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 29px;
  text-align: center;
  color: #FFFFFF;
}
.form-popup-one .text-variable, .form-popup-two .text-variable {
  display: block;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 20px;
  /* identical to box height */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  margin: 20px 0 15px;
}
.form-popup-one .text-description, .form-popup-two .text-description {
  max-width: 450px;
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 23px;
  letter-spacing: 2px;
  text-align: center;
  color: #FFFFFF;
}
.form-popup-one .social-link, .form-popup-two .social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
}
.form-popup-one .social-link .icons-and-title, .form-popup-two .social-link .icons-and-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-popup-one .social-link .icons-and-title .icons, .form-popup-two .social-link .icons-and-title .icons {
  width: 70px;
  height: 70px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.form-popup-one .social-link .icons-and-title .icons span:before, .form-popup-two .social-link .icons-and-title .icons span:before {
  font-size: 35px;
  transition: 0.3s ease;
}
.form-popup-one .social-link .icons-and-title .icons .icon-massenger .path2:before, .form-popup-two .social-link .icons-and-title .icons .icon-massenger .path2:before {
  color: #2196F3;
}
.form-popup-one .social-link .icons-and-title .icons .icon-whatsapp .path2:before, .form-popup-two .social-link .icons-and-title .icons .icon-whatsapp .path2:before {
  color: #4CAF50;
}
.form-popup-one .social-link .icons-and-title .name-icon, .form-popup-two .social-link .icons-and-title .name-icon {
  font-family: 'M PLUS 1p', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 23px;
  text-align: center;
  letter-spacing: 2px;
  color: #FFFFFF;
}
.form-popup-one .social-link .icons-and-title .viber, .form-popup-two .social-link .icons-and-title .viber {
  background: #8E24AA;
}
.form-popup-one .social-link .icons-and-title .telegram, .form-popup-two .social-link .icons-and-title .telegram {
  background: #039BE5;
}
.form-popup-one .social-link .icons-and-title .massenger, .form-popup-two .social-link .icons-and-title .massenger {
  background: #2196F3;
}
.form-popup-one .social-link .icons-and-title .whatsapp, .form-popup-two .social-link .icons-and-title .whatsapp {
  background: #4CAF50;
}

<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>


<div class="btn-to-form">
  <a data-fancybox data-options='{"src": "#modal-form-one", "touch": false, "smallBtn" : false}' href="javascript:;" class="btn-to-form-item btn btn-primary">резервировать <br> дату</a>
</div>
<div id="modal-form-one" class="form-popup-one">
  <span class="title-form">Зарезервировать дату</span>
  <form action="#" class="form-one">
    <div class="title-and-input">
      <span class="title-input">ваше имя</span>
      <input type="text" required="" id="form-value-1" placeholder="Имя">
    </div>
    <div class="title-and-input">
      <span class="title-input">Ваш email</span>
      <input type="email" required="" id="form-value-2" placeholder="Email">
    </div>
    <button class="btn-form send-one" data-fancybox data-options='{"src": "#modal-form-two", "touch": false, "smallBtn" : false}'>резервировать</button>
  </form>
  <span class="text-variable">или</span>
  <p class="text-description">
    Заказать немедленно/узнать дополнительную информацию
  </p>
  <div class="social-link">
    <div class="icons-and-title">
      <a href="#" class="icons viber">
        <span class="icon-viber"></span>
      </a>
      <span class="name-icon">viber</span>
    </div>
    <div class="icons-and-title">
      <a href="#" class="icons telegram">
        <span class="icon-telegram"></span>
      </a>
      <span class="name-icon">Telegram</span>
    </div>
    <div class="icons-and-title">
      <a href="#" class="icons massenger">
        <span class="icon-massenger"><span class="path1"></span><span class="path2"></span></span>
      </a>
      <span class="name-icon">Massenger</span>
    </div>
    <div class="icons-and-title">
      <a href="#" class="icons whatsapp">
        <span class="icon-whatsapp"><span class="path1"></span><span class="path2"></span></span>
      </a>
      <span class="name-icon">WhatsApp</span>
    </div>
  </div>
</div>
<div id="modal-form-two" class="form-popup-two">
  <span class="title-form">Зарезервировать дату</span>
  <form action="#" class="form-two">
    <div class="title-and-input">
      <span class="title-input">ваше имя</span>
      <div class="input-success">
        <input type="text" id="form-value-3" readonly value="Николай">
        <img class="icon-form-true" src="https://img.icons8.com/officexs/30/000000/checkmark.png" />
      </div>
    </div>
    <div class="title-and-input">
      <span class="title-input">Ваш email</span>
      <div class="input-success">
        <input type="email" id="form-value-4" readonly value="[email protected]">
        <img class="icon-form-true" src="https://img.icons8.com/officexs/30/000000/checkmark.png" />
      </div>
    </div>
    <div class="title-and-input">
      <span class="title-input">количество человек </span>
      <input type="number" required="" placeholder="Введите количество человек">
    </div>
    <div class="title-and-input">
      <span class="title-input">Выберите желаемую дату</span>
      <input type="date" class="date" required="" placeholder="Email">
    </div>
    <div class="price">
      <div class="wrapp-price">
        <span class="title-price">Итого:</span>
        <span class="total-price">1415грн</span>
      </div>
      <div class="discount">
        <span class="discount__title">Ваша скидка составила</span>
        <span class="total-discount">134грн</span>
      </div>
    </div>
    <button class="btn-form send-one">отправить</button>
  </form>
  <p class="info-block">
    *Вы только бронируете дату, для уточнения времени, мы с Вами свяжемся, предоплаты нет, рассчет на месте.
  </p>
</div>

Вопрос такой:

Не пойму как сделать чтоб нельзя было нажать на кнопку до тех пор пока не пройдет стандартная проверка на правильность заполненных данных в input в первой форме и как правильно будет реализовать расчет стоимости со скидкой??? Подключен jquery и fancybox для popup

Может кому-то будет интересно или кто-то уже сталкивался с таким?

БЛОГ НА HUSL

Не пойму как доработать форму?

Ответы (0 шт):