Arpit Gupta Arpit Gupta - 1 year ago 41
Javascript Question

how to make a form to show 3 questions at a time

I have developed a survey form which has 13 questions. All questions are coming only in one page but i want to show only 3 question at a time then other 3 question on next page.

I have no idea how to do this.Please help me in this issue.
thanks

Answer Source

This code will show only three item at time, and show next three items when clicked on Next Button.

var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
var $submitButton = $("button[type=submit]");
$("li h3").each(function(i, e){
   $(e).text((i + 1) + ") " + $(e).text());
});

$("#next").click(function() {
  $("li")
    //.css("background", "#FFF")
    .hide();
  for(i = 1; i <= itemsPerPage; i++) {
       $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
       //.css("background" , "red")
       .show();  
  }
   if(currentPage == pages - 1) {
       $submitButton.show();
   }  else {
       $submitButton.hide();
   }
  if(currentPage < pages - 1) {
     currentPage += 1;  
  } else {
    currentPage = 0;
  }

});

$("#next").click();

Example on CodePen