Question

我有一个使用jQuery逐步完成自定义过程的3步表单。我在步骤1和步骤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>

Answer 1

嗯，您的第一个问题是您有多个具有相同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 />';
});

创建所选表单输入的摘要页面

1 个答案: