What is the best way to implement previous and next page logic

Question

I have a webpage which is a huge form (6 pages long). In order to make it more user friendly, I decided to break this down into different sections (div tags). I have placed Previous and Next button on page. On previous click it should display the previous div tag I was at and next should display the next div tag. I was wondering what would be the best way to implement it? So far I have this function which I know is hardcoded for div tag called GeneralSection. Just like GeneralSection, I have 20 more sections. Any ideas how should I go about it ? Help appreciated! :)

$(document).ready(function () {
    $("#imgNext").click(function () {
     $("#GeneralSection").hide();                
    });
});

if you give the divs unique ids but related like part-1, part-2, etc you can iterate through them — depperm, Jul 13 '15 at 19:31
Perhaps a better solution is to enable the use to save the pages as they go - and be able to come back to it. — Ed Heal, Jul 13 '15 at 20:43

score 0 · Answer 1 · answered Jul 13 '15 at 19:48

You could just iterate through an array of elements.

Here's a simple JSBin that should get you going: https://jsbin.com/siyutumizo/edit?html,js,output

$(document).ready(function() {
  var $steps = $('.step');
  var currentStep = 0,
      nextStep;
  
  $steps.slice(1).hide(); //hide all but first
  
  $('#next').on('click', function(e) {
    e.preventDefault();
    
    nextStep = currentStep + 1;
    if (nextStep == $steps.length) {
      alert("You reached the end");
      return;
    }
    $($steps.get(currentStep)).hide();
    $($steps.get(nextStep)).show();
    currentStep = nextStep;
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wizard">
    <div class="step">1</div>   
    <div class="step">2</div> 
    <div class="step">3</div> 
    <div class="step">4</div> 
    <div class="step">5</div> 
    <div class="step">6</div> 
  </div>
  <button id="next">Next</button>
</body>
</html>

score 0 · Answer 2 · answered Jul 13 '15 at 20:12

Another way of implementing this is through siblings.

Jsbin: https://jsbin.com/tarajuyusu/edit?html,js,output

$(function() {
  $('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
  $('#imgNext').on('click', function() {
    var section = $('div#GeneralSection').filter(':visible');
    if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
      return;
    section.hide();
    $(section[0].nextElementSibling).show();
  });

  $('#imgPrev').on('click', function() {
    var section = $('div#GeneralSection').filter(':visible');
    if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
      return;
    section.hide();
    $(section[0].previousElementSibling).show();
  });
});

vinayakj · Answer 3 · 2015-07-14T16:04:56.140

Give each section class pages and per section ids page-1, page-2 like that

$(document).ready(function () {
    var pages = $(".pages").length;
    $("#imgNext").click(function () {
      var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
      if(nextPageNo > pages)
             return false;
      $(".pages:visible").fadeout();
      $("#page-"+nextPageNo).fadeIn();                
    });
});

Havent fully tetsted but this should get you going.

Update

HTML

<div id="container">
    <div id="page-1" class="pages">1</div>   
    <div id="page-2" class="pages">2</div> 
    <div id="page-3" class="pages">3</div> 
    <div id="page-4" class="pages">4</div> 
    <div id="page-5" class="pages">5</div> 
    <div id="page-6" class="pages">6</div> 
</div>

CSS

.pages{
 display: none;
}
#page-1{
 display: block;
}

How do I assign section class page id's ? Is that going to be done is aspx page ? — HereToLearn_, Jul 14 '15 at 11:57

What is the best way to implement previous and next page logic

3 Answers3