Всем привет! Есть задача - переработать форму так, чтобы при выборе категории вопроса далее шел список из шагов конкретно по ней, и в конце отправка. В настоящий момент сделано упрощенно - в каждой категории внутри только 1 пункт и далее общие для всех остальных. Ниже пример реализации. Благодарю за любую помощь.
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <form id="form-step" method="post" action="/" enctype="multipart/form-data">
<div id="step2" class="section">
<h4 class="big">1. Выберите категорию спора</h4>
<div class="line"></div>
<div class="wrp">
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="1" class="form-check-input" value="Лишение водительских прав" required checked>Лишение водительских прав
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="2" class="form-check-input" value="Споры со страховой" required>Споры со страховой
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="3" class="form-check-input" value="Виновность в ДТП, пострадавшие, материальный ущерб" required>Виновность в ДТП, пострадавшие, материальный ущерб
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="4" class="form-check-input" value="Споры о покупке (с дилерами, автосалонами, бывшими владельцами)" required>Споры о покупке (с дилерами, автосалонами, бывшими владельцами)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="5" class="form-check-input" value="Оспаривание административного постановления" required>Оспаривание административного постановления
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-idx="6" class="form-check-input" value="Возврат прав досрочно" required>Возврат прав досрочно
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="category" data-step="step4" class="form-check-input" value="Другое" required>Другое
</label>
</div>
<div class="action">
<button class="step uk-button uk-button-primary" data-step="step3" data-filter="category">Далее</button>
</div>
</div>
</div> |
|
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <script>
$(document).ready(function() {
var idx = 0;
var back = 'step3';
$('.step').on("click",function(e){
e.preventDefault();
step = $(this).data("step");
filter = $(this).data("filter");
$('.section').addClass("d-none");
$('#'+step).removeClass("d-none");
if(filter != undefined){
idx = $('input[name="'+filter+'"]:checked').data("idx");
if(idx != undefined){
$('#'+filter+idx+' .form-check:first-child input').click();
$('#'+filter+idx).removeClass("d-none");
back = 'step3';
}else{
step = $('input[name="'+filter+'"]:checked').data("step");
$('.section').addClass("d-none");
$('#'+step).removeClass("d-none");
back = 'step2';
}
}
if(step == 'step2'){
idx = 0;
}
});
$('.back').on("click",function(e){
e.preventDefault();
$('.section').addClass("d-none");
$('#'+back).removeClass("d-none");
if(idx){
$('#category'+idx).removeClass("d-none");
}
});
$('input[name="fio"]').keyup(function(e){
if($(this).val().length >= 3){
$('button[data-step="step8"]').removeAttr('disabled');
}else{
$('button[data-step="step8"]').attr('disabled','true');
}
});
$('input[name="phone"]').keyup(function(e){
if($(this).val().length >= 16){
$('button[type="submit"]').removeAttr('disabled');
}else{
$('button[type="submit"]').attr('disabled','true');
}
});
});
</script> |
|
(
