0

我有一个带有按钮的页面，该按钮在单击时隐藏了带有一些 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>

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

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

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

4

3 回答 3

1

您的问题是您在每个“步骤”的末尾发布表格。

尝试这个：

<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['step'] 作为参数传递给将处理输入的某些脚本。它充满了不完整的表格，所以请注意这一点。

于 2012-11-19T09:40:07.207 回答
1

你在寻找类似的东西吗？

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/

于 2012-11-19T20:09:16.240 回答
0

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

于 2012-11-14T14:31:14.493 回答