HTML多步骤表单点击单选按钮自动切换步骤功能实现咨询

需求说明 #

• 表单总共分为4个步骤：前3步为选项选择步骤，最后1步为联系信息填写提交步骤
• 实现选中前3步的选项后自动跳转至下一步，无需手动点击下一步按钮
• 最后一步用户填写完联系信息点击提交后，表单数据发送到指定webhook地址，支持Integromat读取数据

原有代码 #

现有步骤切换jQuery代码 #

$(document).ready(function() {
  'use strict';

  $('.test-step .button').on('click', function(e) {
    e.preventDefault();
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  $('.test-step .prev-btn').on('click', function(e) {
    e.preventDefault();
    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })
})

对应HTML表单代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="example-1" action="webhook" id="wrapped" method="POST">
            <div class="covid-test-wrap test-step active">
              <div class="test-progress">
                <div class="test-progress-step">
                  <span class="step-number">1/4</span>
                  <svg>
                    <circle class="step-4" cx="30" cy="30" r="28" stroke-width="4" fill="none" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></circle>
                  </svg>
                </div>
              </div>
              <h3>Kaç Çalışanınız Var?</h3>
              <div class="step-block">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="calisan-sayisi" value="1 - 2" class="form-control" id="1 - 2">
                      <label for="1 - 2">1 - 2</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="calisan-sayisi" value="3 - 4" class="form-control" id="3 - 4">
                      <label for="3 - 4">3 - 4</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="calisan-sayisi" value="5 - 19" class="form-control" id="5 - 19">
                      <label for="5 - 19">5 - 19</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="calisan-sayisi" value="20 - 49" class="form-control" id="20 - 49">
                      <label for="20 - 49">20 - 49</label>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="radio" name="calisan-sayisi" value="50 +" class="form-control" id="50 +">
                      <label for="50 +">50 +</label>
                    </div>
                  </div>
                <a href="#" class="button">Sonraki</a>
              </div>
              </div>
            </div>
            <div class="covid-test-wrap test-step">
              <div class="test-progress">
                <a href="#" class="prev-btn"><img src="images/arrow-left-grey.png" alt="">Önceki</a>
                <div class="test-progress-step">
                  <span class="step-number">2/4</span>
                  <svg>
                    <circle class="step-5" cx="30" cy="30" r="28" stroke-width="4" fill="none" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></circle>
                  </svg>
                </div>
              </div>
              <h3>Mevcut Yemek Gideri Çözümünüz Hangisi?</h3>
              <div class="step-block">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="checkbox" name="cozum" value="Elden Nakit Ödeme Yapılıyor" class="form-control" id="Elden Nakit Ödeme Yapılıyor">
                      <label for="Elden Nakit Ödeme Yapılıyor">Elden Nakit Ödeme Yapılıyor</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="checkbox" name="cozum" value="İş Yerinde Mutfağımız Var" class="form-control" id="İş Yerinde Mutfağımız Var">
                      <label for="İş Yerinde Mutfağımız Var">İş Yerinde Mutfağımız Var</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="checkbox" name="cozum" value="Catering Hizmeti Alıyoruz" class="form-control" id="Catering Hizmeti Alıyoruz">
                      <label for="Catering Hizmeti Alıyoruz">Catering Hizmeti Alıyoruz</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="checkbox" name="cozum" value="Anlaşmalı Restoranda Yiyoruz" class="form-control" id="Anlaşmalı Restoranda Yiyoruz">
                      <label for="Anlaşmalı Restoranda Yiyoruz">Anlaşmalı Restoranda Yiyoruz</label>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="checkbox" name="cozum" value="Yemek Kartı, Kuponu Kullanıyoruz" class="form-control" id="Yemek Kartı, Kuponu Kullanıyoruz">
                      <label for="Yemek Kartı, Kuponu Kullanıyoruz">Yemek Kartı, Kuponu Kullanıyoruz</label>
                    </div>
                  </div>
                <a href="#" class="button">Sonraki</a>
              </div>
              </div>
            </div>
            <div class="covid-test-wrap test-step">
              <div class="test-progress">
                <a href="#" class="prev-btn"><img src="images/arrow-left-grey.png" alt="">Önceki</a>
                <div class="test-progress-step">
                  <span class="step-number">3/4</span>
                  <svg>
                    <circle class="step-5" cx="30" cy="30" r="28" stroke-width="4" fill="none" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></circle>
                  </svg>
                </div>
              </div>
              <h3>Talebinizi Hangisi En Doğru İfade Eder?</h3>
              <div class="step-block">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="talep" value="Kurumsal Firma Başvurusu" class="form-control" id="Kurumsal Firma Başvurusu">
                      <label for="Kurumsal Firma Başvurusu">Kurumsal Firma</label>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="radio" name="talep" value="Restoran, Cafe, Market Başvurusu" class="form-control" id="Restoran, Cafe, Market Başvurusu">
                      <label for="Restoran, Cafe, Market Başvurusu">Restoran, Cafe, Market</label>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="radio" name="talep" value="Bireysel, Kamu Görevlisi Başvurusu" class="form-control" id="Bireysel, Kamu Görevlisi Başvurusu">
                      <label for="Bireysel, Kamu Görevlisi Başvurusu">Bireysel, Kamu Görevlisi</label>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="radio" name="talep" value="Diğer" class="form-control" id="Diğer">
                      <label for="Diğer">Diğer</label>
                    </div>
                  </div>
                <a href="#" class="button">Sonraki</a>
              </div>
              </div>
            </div>
            <div class="covid-test-wrap test-step">
              <div class="test-progress-step">
                <span class="step-number">4/4</span>
                <svg>
                  <circle class="step-8" cx="30" cy="30" r="28" stroke-width="4" fill="none" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></circle>
                </svg>
              </div>
              <h3>İletişim Bilgileriniz</h3>
              <div class="step-block">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="text" class="form-control" name="ad-soyad" placeholder="Adınız Soyadınız" required>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="text" class="form-control" name="telefon" placeholder="Telefon Numaranız" required> <!-- error class: has-error -->
                      <!-- <span class="error-msg">This field is required!</span> -->
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="text" class="form-control" name="firma" placeholder="Firma Adınız" required> <!-- error class: has-error -->
                      <!-- <span class="error-msg">This field is required!</span> -->
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input type="text" class="form-control" name="e-posta" placeholder="E - Posta Adresiniz" required> <!-- error class: has-error -->
                      <!-- <span class="error-msg">This field is required!</span> -->
                    </div>
                  </div>
                <button class="submit" data-toggle="modal" data-target="#terms-txt1">Gönder</button>
              </div>
            </div>
          </form>

修改后实现自动跳转的jQuery代码 #

直接替换原有jQuery代码即可，保留了原有的上下步按钮切换逻辑，新增了选项选中自动跳转逻辑：

$(document).ready(function() {
  'use strict';

  // 原有下一步按钮逻辑
  $('.test-step .button').on('click', function(e) {
    e.preventDefault();
    goToNextStep($(this).parents('.test-step'));
  })

  // 原有上一步按钮逻辑
  $('.test-step .prev-btn').on('click', function(e) {
    e.preventDefault();
    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  // 单选按钮选中自动跳转
  $('.test-step input[type="radio"]').on('change', function() {
    const currentStep = $(this).parents('.test-step');
    // 不是最后一步才跳转
    if(currentStep.next('.test-step').length) {
      goToNextStep(currentStep);
    }
  })

  // 第二步多选选中任意一个自动跳转，如需调整选中数量规则可修改判断条件
  $('.test-step input[type="checkbox"]').on('change', function() {
    const currentStep = $(this).parents('.test-step');
    // 至少选中1个就跳转
    if(currentStep.find('input[type="checkbox"]:checked').length > 0 && currentStep.next('.test-step').length) {
      goToNextStep(currentStep);
    }
  })

  // 封装跳转下一步公共方法
  function goToNextStep(currentStep) {
    currentStep.next().addClass('active');
    currentStep.removeClass('active');
  }
})

数据提交说明 #

表单action属性已经配置为webhook地址，用户在最后一步填写完必填信息点击提交按钮后，表单数据会自动发送到该webhook地址，直接在Integromat中创建对应webhook触发场景，即可正常读取提交的所有表单数据。

内容的提问来源于stack exchange，提问作者Yağız Gürbüz