多步形式

Question

我找到online的多smtp格式。但是，下一个和上一个按钮嵌入到每个fieldset中，我希望它们位于fieldset之外，以便它们可以用于所有集合。不只是一个。

对于最后一个，我.show()提交按钮。同时隐藏第一个按钮。

可以这样做吗？

<fieldset>
<input type="text" name="firstname" placeholder="First Name">

<input type="button" name="next" class="next" value="Next">
</fieldset>

<fieldset>
<input type="text" name="lastname" placeholder="Last Name">

<input type="button"name="previous" class="previous" value="Previous">
<input type="button" name="next" class="next" value="Next">
</fieldset>


<fieldset>
<input type="text" name="email" placeholder="E-mail">

<input type="button" name="previous" class="previous" value="Previous">
<input type="submit" name="submit" value="Submit">
</fieldset>

$(document).ready(function(){


  var current = 1,current_step,next_step,steps;

  steps = $("fieldset").length;

  $(".next").click(function(){

    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();

    setProgressBar(++current);
  });



  $(".previous").click(function(){

    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();

    setProgressBar(--current);
  });

  setProgressBar(current);
});

Answer 1

您只需要跟踪fieldsets和当前位置。

然后，将它们包裹在jQuery中，一切都很简单。请参阅此示例，具体取决于您的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  var current = 0,
    $form = $("form"),
    $steps = $form.find("fieldset"),
    numSteps = $steps.length;

  function setProgressBar(pos) {
    console.log("Step: " + pos);
  }

  function checkButtons() {
    if (current <= 0) {
      $(".prev").hide();
    } else {
      $(".prev").show();
    }

    if (current >= numSteps - 1) {
      $(".next").hide();
      $(".submit").show();
    } else {
      $(".next").show();
      $(".submit").hide();
    }
  }

  $(".next").click(function() {
    $($steps[current]).hide();
    $($steps[++current]).show();
    setProgressBar(current);

    checkButtons();
  });

  $(".prev").click(function() {
    $($steps[current]).hide();
    $($steps[--current]).show();
    setProgressBar(current);

    checkButtons();
  });

  checkButtons();
  setProgressBar(current);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <input type="text" name="firstname" placeholder="First Name">
  </fieldset>

  <fieldset style="display:none">
    <input type="text" name="lastname" placeholder="Last Name">
  </fieldset>

  <fieldset style="display:none">
    <input type="text" name="email" placeholder="E-mail">
  </fieldset>
</form>

<input type="button" style="display:none" name="prev" class="prev" value="Previous">
<input type="button" style="display:none" name="next" class="next" value="Next">
<input type="submit" style="display:none" name="submit" class="submit" value="Submit">

＆＃13;

＆＃13;

＆＃13;

您还需要注意按钮的可见性，这是​​checkButtons功能的用途。我相信更优雅的方法是可行的，但这个方法有效。

另请注意在开始时隐藏的元素上的display: none样式。