一步一步地显示隐藏的表格

Question

I have a page with a button that is hiding a form with some jQuery when clicked:

<a id="customise" class="configure-demo" href="#">Configure new system &amp; get quote</a>

With the jQuery to hide it being this:

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#customise").click(function(){
    $(".entire_product").hide();
    $(".customise").show();
});
});
</script>

This hides what is initially on the page and shows a hidden step by step form. There will be several steps but each time next is clicked the page reloads and the next step shows

<div class="customise" style="display:none;">    
<form class="form" method="POST" action="<?php the_permalink(); ?>">
        <? if (!$_POST['step']) { ?>
        <input type="hidden" name="step" value="1" />               

        Step 1 info.

        <?  } else if ($_POST['step'] == 1) {
            foreach($_POST as $name => $value) {
            if ($name <> "step") { echo "<input type=\"hidden\" name=\"$name\" value=\"$value\" />";  $field .= $name."=".$value."&";}
        } ?>
        <input type="hidden" name="step" value="2" />               

        Step 2 info

        <? } else if ($_POST['step'] == 2) { //do stuff 
            echo "Do stuff here";
        } ?>
    </form>
</div>

The problem is when you click next on the form, it reloads the page (as it should) but the form is then hidden again until the button at the top of the question is clicked, then it shows the next step.

How can I show step 2 of the form whilst showing the hidden form on reload?

Obviously if the user isn't in the form process then it should keep the form hidden.

Answer 1

Are you looking for something along the lines of this?

HTML:

<form id="customise" method="post" action="">
<a href="#" id='nextStep'>next step</a>|<a href="#" id='previousStep'>previous step</a>
<div id="step1" class="form">
    <h2>Step 1</h2>
</div>

<div id="step2" class="form">
    <h2>Step 2</h2><br>
    <h3>First name</h3><br>
    <input type="text" id="first-name">
</div>

<div id="step3" class="form">
    <h2>Step 3</h2><br>
    <h3>Last name</h3><br>
    <input type="text" id="last-name">
</div>

<div id="step4" class="form">
    <h2>Step 4</h2><br>
    <h3>Car</h3><br>
    <input type="text" id="car">
</div>

Javascript:

var step = 1;
var total = 4;
$(function(){
$('#customise > div').hide();
$('#step'+step).show();
$('#nextStep').click(function(){
    $('#step'+step).hide();
    step += 1;
    if(step > total)
    {
       step = 1;    
    }
    $('#step'+step).show();
});
    $('#previousStep').click(function(){
    $('#step'+step).hide();
    step -= 1;
    if(step == 0)
    {
       step = total;       
    }
    $('#step'+step).show();
});
});

Here's the JS Fiddle: http://jsfiddle.net/d4MZa/