jQuery 多步骤形式，根据选择跳过步骤
jQuery multi step form, skip steps depending on selection
我正在根据此处的教程创建一个多步骤表单：https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/
如果我需要在整个表单中简单地来回导航，它工作得非常好。但是，我需要能够根据用户的选择跳过一些步骤。
我有两个用于演示的按钮，它们分别命名为步骤 3 和步骤 4。
当用户点击其中任何一个时，他们应该被定向到相应的字段集。
我刚刚开始学习 jQuery 并且已经为此苦苦挣扎了好几天。谁能指点一下，不胜感激
我创建了一个 fiddle 希望对您有所帮助。
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);
});
我会继续尝试自己解决这个问题，但如有任何建议，我们将不胜感激。
如果我没有解释清楚，我深表歉意。我的脑子都被这个弄糊涂了！
非常感谢
我根据你的创建了一个新的 fiddle。
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" />
我使用的是 closest() 而不是 parent() ，它会查找 "fieldset" 的第一个父级，因此您可以将这些第 3 步和第 4 步按钮放在字段集中的任何位置，并且不必修改此代码。为了获得 next_step 我只是 select 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);
});
显然，如果您需要根据用户输入跳过步骤，我假设您会在他们单击“下一步”时检查该输入，然后需要跳过...所以这会有点不同，但隐藏当前的逻辑步骤和显示下一步应该是一样的。
希望对您有所帮助。
编辑：添加逻辑以将步骤存储在数组中并根据数组导航到下一步或上一步。
下面的代码片段将模拟需要跳过第 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>
我正在根据此处的教程创建一个多步骤表单：https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/
如果我需要在整个表单中简单地来回导航，它工作得非常好。但是，我需要能够根据用户的选择跳过一些步骤。
我有两个用于演示的按钮，它们分别命名为步骤 3 和步骤 4。
当用户点击其中任何一个时，他们应该被定向到相应的字段集。
我刚刚开始学习 jQuery 并且已经为此苦苦挣扎了好几天。谁能指点一下，不胜感激
我创建了一个 fiddle 希望对您有所帮助。
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);
});
我会继续尝试自己解决这个问题，但如有任何建议，我们将不胜感激。
如果我没有解释清楚，我深表歉意。我的脑子都被这个弄糊涂了！
非常感谢
我根据你的创建了一个新的 fiddle。
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" />
我使用的是 closest() 而不是 parent() ，它会查找 "fieldset" 的第一个父级，因此您可以将这些第 3 步和第 4 步按钮放在字段集中的任何位置，并且不必修改此代码。为了获得 next_step 我只是 select 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);
});
显然，如果您需要根据用户输入跳过步骤，我假设您会在他们单击“下一步”时检查该输入，然后需要跳过...所以这会有点不同，但隐藏当前的逻辑步骤和显示下一步应该是一样的。
希望对您有所帮助。
编辑：添加逻辑以将步骤存储在数组中并根据数组导航到下一步或上一步。
下面的代码片段将模拟需要跳过第 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>