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 に答える