Question

我有一个页面，其中有一个按钮，点击时隐藏了一些带有jQuery的表单：

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

使用jQuery隐藏它是这样的：

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

这隐藏了页面上最初的内容，并显示了隐藏的逐步表单。将有几个步骤，但每次单击下一步页面重新加载，下一步显示

<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>

问题是，当您单击表单上的下一个时，它会重新加载页面（应该如此），但是表单会再次隐藏，直到单击问题顶部的按钮，然后显示下一步。 / p>

如何显示表单的第2步，同时在重新加载时显示隐藏的表单？

显然，如果用户不在表单处理中，那么它应该隐藏表单。

Answer 1

您的问题是您在每个＆＃34;步骤＆＃34;的末尾发布表单。

试试这个：

<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>

还有一些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);
    });

});

或者，如果您需要在步骤之间进行服务器端验证，请使用PHP并将$ POST [＆＃39; step＆＃39;]作为参数传递给将处理输入的某个脚本。它充满了不完整的表格，所以请注意这一点。

Answer 2

您是否正在寻找与此类似的内容？

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();
});
});

这是JS小提琴：http://jsfiddle.net/d4MZa/

Answer 3

您可以将“step”元素包装在命名DIV中，并在使用隐藏表单元素“step”的值重新加载页面时隐藏/显示相应的元素。

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

3 个答案: