Member Avatar for VanzCantDanz

I'm creating a Q&A page with a series of questions, and I was hoping I could have them display one at a time, with "back" and "next" buttons to cycle through them. What I've found while searching is buttons that mimic the browsers back/next buttons, but that's not what I'm looking for. I want the larger Q&A page to be static (I have it set up with SSI, by the way) and have the buttons cycle through text boxes, or html subpages. Is there a simple way to do this, or does it require something like javascript?

Thanks for any help,

V

  • 3 Contributors
  • 3 Replies
  • 234 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Milindo

Dani AI

Generated

A few practical options depending on constraints (static SSI, JS allowed, need to store answers):

  • ’s iframe+JS works but isolates each question in a separate browsing context (forms and back-button behavior get awkward).
  • is right that server-side paging lets you persist answers and is the safest if you must support very old browsers or want to record progress on the server.
  • A simple, modern compromise for a static SSI page is a progressive-enhancement pattern: keep all questions in a single HTML form and use CSS + radio inputs to show one “panel” at a time. That gives a no-JS experience, keeps user inputs in the same form (so values persist while the user moves back and forth), and can be enhanced with a few lines of unobtrusive JS for focus and history.

Minimal pattern (two steps shown):

<form method="post" action="/submit">
  <input type="radio" name="step" id="step-1" checked>
  <section class="panel">
    <h3>Question 1</h3>
    <input name="q1" />
    <label for="step-2" class="next">Next</label>
  </section>

  <input type="radio" name="step" id="step-2">
  <section class="panel">
    <label for="step-1" class="back">Back</label>
    <h3>Question 2</h3>
    <input name="q2" />
    <button type="submit">Submit</button>
  </section>
</form>

<style>
  .panel { display: none; }
  input[name="step"]:checked + .panel { display: block; }
</style>

Enhancements and cautions:

  • Add a tiny script that moves keyboard focus into the first control of the revealed panel and updates the URL/hash (or pushState) so steps can be bookmarked—do this only as enhancement so no-JS users are fine.
  • Use <fieldset>/<legend> for each panel and test with screen readers; set or toggle aria-hidden via JS for best results.
  • Validate and store server-side too (never trust client data). If you expect many questions or need partial saves, prefer server-side paging or AJAX save points.

This pattern meets the static-page requirement, avoids iframe pitfalls, and gives you a graceful no-JS fallback while remaining easy to enhance.

Recommended Answers

All 3 Replies

Member Avatar for Milindo

Why don't you use iframe Frames?
Yes, it would require a bit of JavaScript, but I think a little.
For example, (assuming that all the QA is accesale ny a url qa_num

<iframe id="myFrame" src="www.QA.org/1.html" width="100px" height = "100px">i am the text you will see if your browser can't support iframe</iframe>
<button onclick = "goUp(); ">Up</button>
<button onclick = "goDown(); ">Down</button>

<script>
function GoUp() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 6 ,number.length-5);
number = parseInt(number) + 1; 
document.getElementById("myFrame").src = "www.QA.org/" + number + ".html";
} 
function goDown() {

function GoUp() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 6 ,number.length-5);
number = parseInt(number) - 1; 
document.getElementById("myFrame").src = "www.QA.org/" + number + ".html";
} 
}
</script>

Incomplete code but as near as I can get without knowing the URL

--Milindo

Member Avatar for teedoff

What if the user has opted to turn off javascript?

You could use a server side language to pass the values of each form field on to the final page. PHP or Coldfusion works really well doing this type of project. Another advantage to using server side scripts is the fact that you can save the surveys to a database and call them at anytime to display, track, and manipulate the data gathered.

Edited by teedoff because: n/a
Member Avatar for Milindo

What if the user has opted to turn off javascript?

You could use a server side language to pass the values of each form field on to the final page. PHP or Coldfusion works really well doing this type of project. Another advantage to using server side scripts is the fact that you can save the surveys to a database and call them at anytime to display, track, and manipulate the data gathered.

Yes, that's a good idea. I thought I'd post only HTML, CSS and JS as this is in that category.

Another idea would be to add the plain HTML links in each page of the QA.html files themselves and then put them in a iframe. That's pure HTML (maybe some CSS) so no scripting is involved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.