HTML form over several slides

问题:

I want to create a form on a site of about five questions, each of which is located on a different slide. The effect I'm going for is that you answer a question, and then after a short delay the next question appears in the same spot. Right now I'm accomplishing it kind of using jQuery tabs, but I'd prefer to do it without the tabs being visible (or at least not looking like tabs) and with automatic progression to the next question.

I looked for "JavaScript slideshow", but that just seems to bring up an endless number of plugins for image slideshows. I swear I've seen this effect before but now can't find it. Is there a plugin for this (right now even just a slideshow that allows arbitrary HTML on each slide would be helpful--I'll figure out how to get the info from the form later).

回答1:

You could hold the values entered on each page in JavaScript variables.

var answerOne, answerTwo, answerThree, answerFour, answerFive;
$('form').submit(function(event){
    event.preventDefault();
    answerOne = $('form input#question-one').value();
    // then run the script which hides current page and shows next
});

You could use jQuery to switch between pages also fairly easily.

The simplest way would be the following (imagine your form within each div):

<div id="page-1"></div>
<div id="page-2"></div>
<div id="page-3"></div>
 ...

<script>
    $('#page-1').hide();
    $('#page-2').show();
</script>

This is a very simple example of how to hide and show elements on a page. It should give you enough to work with. You'll need a variable to store which page you're looking at, and increment it as it changes.

If the information is to be saved at the end I'd suggest processing it server side making sure it's valid and the type of data you'd expect. Otherwise an attacker could manipulate the values before they're sent, possibly creating unwanted SQL injection / malicious code, etc.