jQuery多步骤表单，根据选择跳过步骤
Posted
技术标签:
【中文标题】jQuery多步骤表单，根据选择跳过步骤【英文标题】：jQuery multi step form, skip steps depending on selection 【发布时间】：2019-09-19 05:20:43 【问题描述】：我在这里根据本教程创建一个多步骤表单：https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/
如果我需要简单地在整个表单中来回导航，它工作得非常好。但是，我需要能够根据用户的选择跳过一些步骤。
为了演示的目的，我有两个按钮，它们被命名为第 3 步和第 4 步。
当用户点击任何一个时，他们应该被定向到相应的字段集。
我刚刚学习 jQuery，并且已经为此苦苦挣扎了好几天。如果有人能指出方向，我将不胜感激。
我创建了一个小提琴，希望对您有所帮助。
https://jsfiddle.net/0pf6xavq/
<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);
);
我将继续尝试自己解决这个问题，但我们将不胜感激。
如果我没有很好地解释它，我深表歉意。我的大脑因此而疲惫不堪！
非常感谢
【问题讨论】：
【参考方案1】：我根据你的创建了一个新的小提琴。
https://jsfiddle.net/5o0g43k7/
我添加了第 3 步和第 4 步按钮类，并向它们添加了与您的下一个和上一个点击事件执行类似逻辑的点击事件。
<input type="button" name="step3" class=" btn btn-default step-3" value="Step 3" />
<input type="button" name="step4" class=" btn btn-primary step-4" value="Step 4" />
我使用的是最接近（）而不是 parent（），它将寻找第一个“字段集”的父级，因此您可以将这些第 3 步和第 4 步按钮放在字段集中的任何位置，而不必修改这段代码。要获取 next_step，我只需选择 id 为“step3”的元素，因为我看到您在这些字段集上已经有了 id 属性。
$(document).on("click",".step-3",function()
current_step = $(this).closest("fieldset");
next_step = $("#step3");
next_step.show();
current_step.hide();
//setProgressBar(--current);
);
$(document).on("click",".step-4",function()
current_step = $(this).closest("fieldset");
next_step = $("#step4");
next_step.show();
current_step.hide();
//setProgressBar(--current);
);
显然，如果您需要根据用户输入跳过步骤，我假设您会在他们单击下一步时检查该输入，然后需要跳过...所以这会有点不同，但隐藏当前步骤的逻辑和显示下一步应该是一样的。
希望对你有帮助。
编辑：添加逻辑以将步骤存储在数组中，并根据数组导航到下一个或上一个步骤。
下面的 sn-p 将模拟需要跳过步骤 3。它通过从 stepIds 数组中删除 3 来工作。可以通过首先使用所有步骤 (1-5) 初始化 stepIds 来使用此逻辑，然后根据用户输入从数组中删除步骤或将它们插入到正确的位置以保持排序顺序。
我不确定您是否真的需要第 3 步和第 4 步按钮。我在示例中删除了第 3 步按钮。如果您要在完成的逻辑中包含这些按钮，您还需要显示和隐藏这些按钮，以及在 stepIds 数组中添加和删除步骤 id。
var stepIds = [1, 2, 4, 5 ]
$(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).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(current_step)+1];
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
);
$(document).on("click",".previous",function()
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(current_step)-1];
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
);
$(document).on("click",".step-3",function()
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(3)];
if (next_step)
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
);
$(document).on("click",".step-4",function()
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(4)];
if (next_step)
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
);
);
form#applicationForm fieldset:not(:first-of-type), #plotTable
display: none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="py-5 text-center">
<h2>Application form</h2>
</div>
<div class="row">
<div class="col-md-12">
<form id="applicationForm" class="needs-validation" novalidate>
<fieldset data-id="1">
<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 data-id="2">
<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="step4" class=" btn btn-primary step-4" 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" data-id="3">
<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" data-id="4">
<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" data-id="5">
<h4 class="mb-3">Final Step of the form</h4>
<p>All routes lead to this final step</p>
</fieldset>
</form>
</div>
</div>
</div>【讨论】：
感谢您的帮助。我会将您提供的内容整合到我的项目中。 单击后退按钮时，不会返回到正确的步骤。我猜我需要为 previous_step 做类似的事情，就像你为 next_step 所做的那样？ （抱歉，我写的太久了，无法添加到我的第一个回复中！） 如果你从第2步跳到第4步然后回击它应该回到第2步吗？还是第 3 步？ 如果您单击小提琴中的第 4 步，它将带您到第 4 步。如果您点击后退按钮，它会将您带到第 3 步，但它应该带您回到您来自的地方（描述步骤） 好的，这让事情变得有点复杂。你能做一些将可用步骤存储在数组中的事情吗？因此，如果您要让他们跳过第 3 步，您将得到 [1, 2, 4, 5]。然后在下一个或上一个上，您检查数组中的下一个或上一个元素以获取将它们带到的步骤？以上是关于jQuery多步骤表单，根据选择跳过步骤的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jQuery click 事件在我的多步骤表单中不能多次工作？