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

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.

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/

You could wrap the 'step' elements together in named DIVs and hide/show the appropriate ones when the page reloads using your the value of the hidden form element 'step'.

Your problem is that you are posting the form at the end of each "step".

Try this:

<form id="customise" method="post" action=""> 

    <div id="first-step">
        <h2>Step 1 info</h2>
    </div>

    <div id="second-step">
        <h2>Step 2 info</h2><br>
        <h3>First name</h3><br>
        <input type="text" id="first-name">
    </div>

    <div id="third-step">
        <h2>Step 3 info</h2><br>
        <h3>Last name</h3><br>
        <input type="text" id="last-name">
    </div>

    <div id="fourth-step">
        <h2>Step 4 info</h2><br>
        <h3>Favourite food</h3><br>
        <input type="text" id="favourite-food">
    </div>

    <div id="last-step">
        <h2>Final step</h2><br>
        <h3>Entered data:</h3><br>
        <div id="mdata"></div><br>
        <input type="submit" value="Submit">
    </div>

</form>

And some JavaScript:

var prevLink = '<a class="prev" href="#">Previous step</a> ';
var nextLink = '</a><a class="next" href="#">Next step></a>';
var navHTML = '<div class="form-navigation">' + prevLink + nextLink + '</div>';
var FormData = [];

$(function() {

    // Initialization
    $('#customise > div').hide().append(navHTML);
    $('#first-step .prev').remove();
    $('#last-step .next').remove();

    // Show first step
    $('#first-step').show();

    $('a.next').click(function() {

        var whichStep = $(this).parent().parent().attr('id');

        if (whichStep == 'first-step') {
            // do nothing
        }

        else if (whichStep == 'second-step') {
            FormData[0] = $('#first-name').val();
        }

        else if (whichStep == 'third-step') {
            FormData[1] = $('#last-name').val();
        }

        else if (whichStep == 'fourth-step') {
            FormData[2] = $('#favourite-food').val();
            $('#mdata').html('Dear ' + FormData[0] + FormData[1] + '! I have some ' + FormData[2] + ' for you!');
            var paraData = "fname=" + FormData[0] + "&lname=" + FormData[1] + "&food=" + FormData[2];
            alert(paraData);
        }
        else if (whichStep == 'last-step') {
            // do nothing
        }

        $(this).parent().parent().hide(300).next().show(300);
    });

    $('a.prev').click(function() {
        $(this).parent().parent().hide(300).prev().show(300);
    });

});

Or if you require server-side validation between steps, use PHP and pass $POST['step'] as an argument to some script which will process inputs. It is fraught with incompletely filled forms, so take care of this.