【发布时间】：2023-03-19 15:23:01
【问题描述】：
我在这里根据本教程创建一个多步骤表单：https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/
如果我需要简单地在整个表单中来回导航，它工作得非常好。但是，我需要能够根据用户的选择跳过一些步骤。
为了演示的目的，我有两个按钮，它们被命名为第 3 步和第 4 步。
当用户点击任何一个时，他们应该被定向到相应的字段集。
我刚刚学习 jQuery，并且已经为此苦苦挣扎了好几天。如果有人能指出方向，我将不胜感激。
我创建了一个小提琴，希望对您有所帮助。
https://jsfiddle.net/0pf6xavq/
HTML
<div class="container">
<div class="py-5 text-center">
<h2>Application form</h2>
</div>
<div class="row">
<div class="col-md-12">
<!--<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>-->
<form id="applicationForm" class="needs-validation" novalidate>
<fieldset>
<h4 class="mb-3">Site Details</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="clientName">Name</label>
<input type="text" class="form-control" id="clientName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid Name is required.
</div>
</div>
</div>
<div class="mb-3 mt-4">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" required>
<div class="invalid-feedback">
Please enter site address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2">
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="town">Town</label>
<input type="text" class="form-control" id="town" required>
<div class="invalid-feedback">
Town is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="county">County</label>
<input type="text" class="form-control" id="county" required>
<div class="invalid-feedback">
County is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="postcode">Post Code</label>
<input type="text" class="form-control" id="postcode" placeholder="" required>
<div class="invalid-feedback">
Post Code is required.
</div>
</div>
</div>
<hr class="mb-4">
<input type="button" name="password" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset>
<h4 class="mb-3">Description</h4>
<div class="row">
<div class="col-md-12 mb-3">
<label for="localAuthority">Description </label>
<textarea maxlength="100" class="form-control" id="localAuthoirty"></textarea>
</div>
</div>
<div class="row">
<input type="button" name="step3" class=" btn btn-default" value="Step 3" />
<input type="button" name="step4" class=" btn btn-primary" value="Step 4" />
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="step3">
<h4 class="mb-3">Step 3</h4>
<div class="row">
<div class="col-md-12 mb-3">
This is step 3
</div>
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="step4">
<h4 class="mb-3">Step 4</h4>
<div class="row">
<div class="col-md-12 mb-3">
This is step 4
</div>
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="terms">
<h4 class="mb-3">Final Step of the form</h4>
<p>All routes lead to this final step</p>
</fieldset>
</form>
</div>
</div>
</div>
JS
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
//$(".next").click(function(){
$(document).on("click",".next",function(){
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").next();
next_step.show();
current_step.hide();
//setProgressBar(++current);
});
//$(".previous").click(function(){
$(document).on("click",".previous",function(){
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").prev();
next_step.show();
current_step.hide();
//setProgressBar(--current);
});
我将继续尝试自己解决这个问题，但我们将不胜感激。
如果我没有很好地解释它，我深表歉意。我的大脑因此而疲惫不堪！
非常感谢
【问题讨论】：
标签： jquery forms multi-step