There are 4 Steps in Total.
3 Radio and Last Step Information (Submit Step)
i want to show the next step when a radio button is clicked.
switch to the next step without using the next button.
$(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 Form:
<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>
I need the form to be sent automatically to the next step when the options are selected, and finally by entering the contact information. i will send it via webhook and read the data using integromat.