Button "Next" and "Back" in the form with the button "Radio"

Question

I want to put 10 questions from a database and a timer in html form. questions that will be displayed one after another when I press the next button, the next question will be shown and when the back button is pressed, the previous question should be shown

<form name="form1" bgcolor="red" action="resultbyme.jsp" method="POST"> <div style="background-color:orange;"> <% qno=n+1; ques=rs.getString(4); op1=rs.getString(5); op2=rs.getString(6); op3=rs.getString(7); op4=rs.getString(8); %> <br>Q.<%=qno%>--><%=ques%></br> <input type="radio" name="opt<%=qno%>" value="<%=op1%>" /><%=op1%><br> <input type="radio" name="opt" value="<%=op1%>" /><%=op2%><br> <input type="radio" name="opt" value="<%=op1%>" /><%=op3%><br> <input type="radio" name="opt" value="<%=op1%>" /><%=op4%><br> <% } } //end for } catch(SQLException e) { out.println("erorr in sql ") ; } %> <div bgcolor="blue"><input type="submit" value="submit" name="submit test" /></div> </div> </form> 

Answer 1

You can load everything into different divs and display them one by one using JavaScript.

Answer 2

You will have a common header and that the timer will handle. your html element will dynamically change (use ajax for this) based on a user click next or back.

It’s better to keep the question numbers hidden in the next and previous buttons. So, in an AJAX call, you can get the question number and go to the server to get this specific question. You can display it in a specific range or div tag.

  <div id="questionId"> My question is here </div> 

inside javascript

  function loadQuestion(questionNo){ $.ajax({ type: "POST", url: 'projectName/showQuestion.action', data: "quesionNo="+questionNo success: function(data) { document.getElementById('questionId').innerHTML =data; } }); } 

This is just a guide, and you change the thing according to your approach.