0

我使用以下代码创建了一个两步表单：

<form class="form" method="POST" action="<?php bloginfo('url'); ?>/contact-us/">
    <? if (!$_POST['step']) { ?>
    <h1>Step 1 of 2</h1><br />
    <input type="hidden" name="step" value="1" />               
    <table border="0" width="100%">
        <tr>
            <td>
                <input type="text" name="title" id="title" value="Title*" />
            </td>
        </tr>
    </table>        
    <button class="continue-button" type="submit" name="submit">Continue</button>
    <? } else if ($_POST['step'] == 1) {
        foreach($_POST as $name => $value) {
        if ($name <> "step") { echo "<input type=\"hidden\" name=\"$name\" value=\"$value\" />"; }
    } ?>
    <h1>Step 2 of 2</h1><br />
    <input type="hidden" name="step" value="2" />
    <table border="0" width="100%">
        <tr>
            <td>
                <input type="text" name="name" id="name" value="Name*" />
            </td>
        </tr>
    </table>        
    <button class="continue-button" type="submit" name="submit">submit</button>
    <? } else if ($_POST['step'] == 2) { //do stuff 
        echo "Do stuff here";
    } ?>
</form>

如何在第 2 步中添加后退按钮？将添加几个步骤，而不仅仅是 2 个，因此用户需要能够在这些步骤中前进和后退，同时保留他们填写的内容。

4

3 回答 3

2

尝试这个 

<form class="form" method="POST" action="<?php bloginfo('url'); ?>/contact-us/">
    <? if (!$_POST['step']) { ?>
    <h1>Step 1 of 2</h1><br />
    <input type="hidden" name="step" value="1" />               
    <table border="0" width="100%">
        <tr>
            <td>
                <input type="text" name="title" id="title" value="<?= $_REQUEST["title"]?>"  placeholder="Title*" />
            </td>
        </tr>
    </table>        
    <button class="continue-button" type="submit" name="submit">Continue</button>
    <? } else if ($_POST['step'] == 1) {
        $field  ="";
        foreach($_POST as $name => $value) {
        if ($name <> "step") { echo "<input type=\"hidden\" name=\"$name\" value=\"$value\" />";  $field .= $name."=".$value."&";}
    } ?>
    <div><a href="<?php bloginfo('url'); ?>/contact-us/?<?= $field ?>" >Back</a></div>
    <h1>Step 2 of 2</h1><br />
    <input type="hidden" name="step" value="2" />
    <table border="0" width="100%">
        <tr>
            <td>
                <input type="text" name="name" id="name" value="Name*" />
            </td>
        </tr>
    </table>        
    <button class="continue-button" type="submit" name="submit">submit</button>
    <? } else if ($_POST['step'] == 2) { //do stuff 
        echo "Do stuff here";
    } ?>
</form>
于 2012-09-20T12:03:01.300 回答
1

首先将其添加到您的页面顶部

// keep the data
$_SESSION['data'] = $_POST;
$_SESSION['step'] = $_REQUEST['step'];

还将语句替换为if如下内容：

if ($_REQUEST['step'] == 1) {
    // continue

在表单上写入动态值

<input type="text" name="title" id="title" 
value="<?php echo $_SESSION['data']['title']; ?>" />

使用linkforBack和Next：

<a href="/?step=<?php echo $_SESSION['step'] - 1; ?>">Back</a>

<a href="/?step=<?php echo $_SESSION['step'] + 1; ?>">Next</a>

我想它对你有用！:)

于 2012-09-20T12:04:55.293 回答
0

要前后导航，您需要将前一个表单中的数据再次传回给它，因此您需要将每个表单的值存储在某个地方。您最好的选择是创建一个session并将每个表单信息存储在会话变量中。然后，当您加载每个表单时，您应该检查数据是否已存储在会话中。

然后您可以添加一个 jquery 按钮来更改步骤的值并提交表单。为此，您需要在“step”隐藏输入中输入一个 id，例如“step”

<input type="hidden" name="step" id="step" value="2" />

然后添加一个按钮

<button class="back-button" type="submit" name="back" onclick="$('#step').val('1');">Back</button>

这将更改步骤输入的值，然后提交表单，将您带回之前的表单。

您需要有另一个隐藏的输入来告诉表单它来自哪里，这样它就会知道是查看会话数据（您是要倒退）还是 POST 数据（如果您要前进）。

于 2012-09-20T11:52:51.300 回答