jQuery多步骤表单，根据选择跳过步骤

Question

我正在根据此处的本教程创建一个多步骤表单：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);
  });

我将继续尝试自己解决这个问题，但任何建议都将不胜感激。

如果不好解释，我深表歉意。我的大脑为此感到迷惑！

非常感谢

Answer 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" />

我使用的是closest（）而不是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);
});

很明显，如果您需要根据用户输入来跳过步骤，我假设您将在用户单击“下一步”时检查该输入，然后需要跳过...所以这有点不同，但是隐藏当前步骤的逻辑和显示下一步应该是相同的。

希望对您有帮助。

编辑：添加逻辑以将步骤存储在数组中，并根据数组导航到下一个或上一个步骤。

下面的代码段将模拟需要跳过步骤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>