JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="form-quote"><form>
        <h3>Получите расчёт в 3 простых шага!</h3>
        <hr />
        <div class="form-quote-steps">
            <div class="form-step fs-wp1 fs-active">
            <h4>Выберите языки</h4>
            <select id="formquote_lang1">
                <option value="">Язык документа</option>
                <option value="ENG">Английский</option>
            </select>
            <select id="formquote_lang2">
                <option value="">Язык перевода</option>
                <option value="RU">Русский</option>
            </select>
        </div>
        <div class="form-step fs-wp2">
            <h4>Загрузите файлы</h4>
            <p>
                <input required="required" type="file" value="Загрузите ваши документ" />
            </p>
        </div>
        <div class="form-step fs-wp3">
            <h4>Оставьте ваши контакты</h4>
            <p><input required="required" type="text" placeholder="Ваше имя" /> <input required="required" type="phone" placeholder="Ваш телефон" /></p>
            <p><input required="required" type="email" placeholder="Ваш email" /> Требуемая дата сдачи перевода <input required="required" type="date" /></p>
            <h4>Комментарий</h4>
            <p><textarea name=""></textarea></p>
            <input type="submit" value="Запросить расчёт" class="btn" />
</div>
        </div>
        </form>
        <hr />
        <div class="form-quote-controls">
            <button class="btn btn-prev btn-inactive">Назад</button>
            <button class="btn btn-next btn-inactive">Вперед</button>
        </div>

CSS

.form-step { 
   display: none;
}
 
.fs-active {
   display: block;
}

JavaScript

var formwrap = document.querySelector("#form-quote");
   var formlang1 = document.querySelector("#formquote_lang1");
   var formlang2 = document.querySelector("#formquote_lang2");
   var btnnext = document.querySelector("#form-quote .btn-next");
   var btnprev = document.querySelector("#form-quote .btn-prev");
 
   formlang1.onchange = function() {
      if(formlang2.value !== '') {
         document.querySelector("#form-quote .btn-next").classList.remove("btn-inactive");
      }
   }
   formlang2.onchange = function() {
      if(formlang1.value !== '') {
         document.querySelector("#form-quote .btn-next").classList.remove("btn-inactive");
      }
   }
 
   btnnext.onclick = function() {
      if(!this.classList.contains("btn-inactive")) {
         if(document.querySelector("#form-quote .fs-active") !== null) {
         let nextstep = document.querySelector("#form-quote .fs-active").nextSibling;
         nextstep.classList.add("fs-active");
         document.querySelector("#form-quote .fs-active").classList.toggle("fs-active");
         }
         else { alert("Вы в конце"); }
      }
   }