Question

我有一个多步骤（多页？）表单，每当用户按下“下一个”或“上一个”按钮时，表单域就会通过div显示和隐藏。

我只想禁用第一个div上的“上一个”按钮（div id =“ page1” class =“ pageform”），因为不需要它，反之亦然，最后一个div上使用“ next”按钮（div id =“ page16” class =“ pageform”）

我不太确定该怎么做，因为我是JS的新手，我使用了一个教程来帮助我弄清楚如何使用JQuery显示和隐藏div。

<!-- PAGE 1 -->
<div id="page1" class="pageform">
      <div class="radio">
      <label for="AmountNeeded" style="display: none;">How much do you need?</label>
      <label><input type="radio" name="AmountNeeded" value="500" required>$100 - $500</label><br>
  </div>

  <div class="radio">
    <label><input class="optradio" type="radio" name="AmountNeeded" value="1000" checked>$500 - $1000</label><br>
  </div>

  <div class="radio">
    <label><input class="optradio" type="radio" name="AmountNeeded" value="2000">$1500 - $2000</label><br>
  </div>

  <div class="radio">
    <label><input class="optradio" type="radio" name="AmountNeeded" value="2500">$2500 or more</label><br>
  </div>
</div>

<!---PAGE 2 -->

<div id="page2" class="pageform">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="Firstname">First name</label><br>
        <input name="Firstname" class="form-control" type="text" value="Bob" required />
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label for="Lastname">Last name</label><br>
        <input name="Lastname" class="form-control" type="text" value="" required />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="Email">Email Address</label><br>
        <input name="Email" class="form-control" type="email" value="asdf@asdf.com" required />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="HomePhone">Home Phone</label><br>
        <input type="tel" class="form-control" name="HomePhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 123-456-7890" required>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="form-group">
        <label for="CellPhone">Cell Phone </label><br>
        <input type="tel" class="form-control" name="CellPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 123-456-7890" required>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="form-group">
        <label for="Phone">Work Phone</label><br>
        <input type="tel" class="form-control" name="WorkPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" value="111-222-3333" required>
      </div>
    </div>
  </div>
</div>

.........

<button id="backbutton" class="btn btn-secondary" onclick="showPrev();"> Go back </button>
<button id="nextbutton" class="btn btn-primary" onclick="showNext();"> Next </button>

这是我要通过div的功能：

var visibleDiv = 0;

function showDiv() {
  $(".pageform").hide();
  $(".pageform:eq(" + visibleDiv + ")").show();
}

showDiv();

function showNext() {
  if (visibleDiv == $(".pageform").length - 1) {
    //visibleDiv = 0;
  } else {
    visibleDiv++;
  }
  showDiv();
}

function showPrev() {
  if (visibleDiv == 0) {
    //visibleDiv = $(".mybox").length-1;
  } else {
    visibleDiv--;
  }
  showDiv();
}

我希望第一个div隐藏上一个按钮，而最后一个div隐藏下一个按钮，而不是每个div上显示的按钮

Answer 1

当visibleDiv第一次隐藏后退按钮时，否则显示它，

function showDiv() {
    $(".pageform").hide();
    $(".pageform:eq(" + visibleDiv + ")").show();

    if(visibleDiv == 1 ) { // 1 or first visible div number
        $("#backbutton").hide();
    } else {
        $("#backbutton").show();
    }

    if(visibleDiv == 2 ) { // 2 or last visible div number
        $("#nextbutton").hide();
    } else {
        $("#nextbutton").show();
    }
}

如何仅在首页（div）上隐藏“上一页”按钮，并在最后一页（div）上隐藏“下一页”按钮

1 个答案: