Arpit Gupta Arpit Gupta - 2 months ago 7
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

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