创建表单的后退按钮

Question

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

<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个步骤，因此用户需要在前进和后退的同时保持自己填写的内容。

Answer 1

尝试这个

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

Answer 2

首先将其添加到页面顶部

// 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']; ?>" />

使用link Back和Next ：

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

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

我想这对您有用！ :)

Answer 3

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

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

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

然后添加一个像

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

这将更改步骤输入的值，然后提交表单，将您带回到上一个表单。

您将需要有另一个隐藏的输入来告诉表单它来自哪里，以便知道是查看会话数据（是向后）还是POST数据（如果是向前）。