0

jQueryを使用してカスタマイズプロセスをステップ実行する3ステップのフォームがあります。手順1と2にいくつかのチェックボックスがあり、手順3で選択したチェックボックスの概要ページを作成したいと思います。

ユーザーが選択に満足したら、それらの選択を特定のアドレスに電子メールで送信したいと思います。

jQueryを使用しているため、別のページに移動して正しい手順を表示/非表示にすることはありません。

手順3で選択したものを表示するにはどうすればよいですか？メールの部分はまだそれほど重要ではありませんが、それを行う必要があることを覚えておいてください。

フォームは次のとおりです。

<div class="entire_product">
    Content here.
    <a id="customise" class="configure-demo" style="margin-top:20px;" href="#">Configure new system &amp; get quote</a>
</div>

<div class="customise" style="display:none;">
    <form id="customisesystem" method="post" action="">
        <div id="first-step">
            <div class="steps">
                <p><b>Step 1 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Options 1</p>

                <div id="customise-area">
                    <input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
                </div>
            </div>
        </div>

        <div id="second-step">
            <div class="steps">
                <p><b>Step 2 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Options 2</p>

                <div id="customise-area">
                    <input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
                </div>
            </div>
        </div>      

        <div id="third-step">
            <div class="steps">
                <p><b>Step 3 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Summary</p>

                <div id="customise-area">
                    <input type="submit" name="submit" id="submit" value="submit" />
                </div>
            </div>
        </div>      
    </form>
</div>

これが私が最初にフォームを表示し、次にそれをステップスルーするために使用しているjQueryです：

<script type="text/javascript">
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
jQuery(document).ready(function( $ ) {
            // init
            $('#customisesystem > div')
                .hide()
                .prepend(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' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }

                $(this).parent().parent().hide().next().show();
            });

            $('a.back').click(function(){
                $(this).parent().parent().hide().prev().show();
            });
        });


jQuery(document).ready(function( $ ) {
$("#customise").click(function(){
    $(".entire_product").hide();
    $(".customise").show();
});
});
</script>
4

1 に答える 1

0

最初の問題は、同じ ID を持つ複数の HTML 要素があることです。これは無効なマークアップです。複数の要素に同じ ID を割り当てることはできません。id 属性は一意である必要があります。

だから、あなたがそれを変更すると仮定すると、#third-step は次のようになります。

<div id="third-step">
    <div class="steps">
        <p><b>Step 3 of 3</b></p>
    </div>
    <div class="progress-buttons"></div>
    <div class="clear"></div>

    <div id="customise-area-3">
        <p>Summary</p>

        <div id="customise-area-3-child">
            <input type="submit" name="submit" id="submit" value="submit" />
        </div>
    </div>
</div>

したがって、次のように jQuery を使用できます。

//Retrieve the customization summary area:
var summary = $('#customise-area-3 p');

//Use jQuery to select all the checkboxes with the name hardware that are checked.
$('input[type=checkbox][name=hardware\[\]]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary.innerHTML += checkboxValue + '<br />';
});
于 2013-01-10T18:54:54.423 に答える