0

次のコードを使用して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="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 に答える