Question

我有一个PHP表单，分为3个单独的PHP页面。第一页提交表单信息，然后由第三方API处理。然后，返回（验证）的结果将显示在第二个PHP页面中，并附带一个表单以供进一步处理。

我的问题是，我是否可以通过其标签结构将此流程整合到BootStrap Wizard Plugin中。

e.g。单击“下一步”填写并提交表单，然后将向导插件移至选项卡2.显示已处理的下一个PHP页面。

<!-- Wizard -->
    <section class="wizard">

        <!-- Wizard navigation -->
            <ul>
                <li><a href="#step1" data-toggle="tab">Registration</a></li>
                <li><a href="#step2" data-toggle="tab">Next step</a></li>
                <li><a href="#step3" data-toggle="tab">Confirmation</a></li>
            </ul>

            <!-- Wizard progress bar -->
            <div class="progress progress-line progress-striped">
            <div class="progress-bar progress-bar-success"></div>
            </div>

        <!-- Wizard content -->
            <div class="tab-content">
                <div class="tab-pane" id="step1">
                <h3>This is first step</h3>
            <form method="post" action="myform.php?api=form&step=1">
                <input type="text" name="phonenumber" id="phonenumber" />
                <input type="submit" value="continue" class="btn btn-primary" />
            </form>
            </div>

            <div class="tab-pane" id="step2">
                <h3>Second step content</h3>
            <form method="post" action="myform.php?api=form&step=2">
                <input type="text" name="faxnumber" id="faxnumber" />
                <input type="submit" value="continue" class="btn btn-primary" />
            </div>

                <div class="tab-pane" id="step3">
                <h3>This is third final step (completed)</h3>
                <p>Form Process Complete</p>
                </div>

        <!-- Wizard pager -->
            <ul class="wizard pager">
            <li class="previous"><a href="javascript:;">Previous</a></li>
            <li class="next"><a href="javascript:;">Next</a></li>
            <li class="next finish"><a href="javascript:;">Finish</a></li>
            </ul>
    </div>

   </section>
   <!-- /Wizard -->
<script src="/js/jquery.bootstrap.wizard.js"></script>
        <script>
            $(document).ready(function() {

                $('.wizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                    var wizard = $('.wizard');
                    var $total = navigation.find('li').length;
                    var $current = index+1;
                    var $percent = ($current/$total) * 100;
                    wizard.find('.progress-bar').css({width:$percent+'%'});

                    // If it's the last tab then hide the next button and show the finish instead
                    if($current >= $total && $total != 0) {
                        wizard.find('.pager .next').hide();
                        wizard.find('.pager .finish').show().removeClass('disabled');
                    } else {
                        wizard.find('.pager .next').show();
                        wizard.find('.pager .finish').hide();
                    }

                }});
            });
</script>

所以我想要实现的是第一个表单在向导的第二个选项卡中显示结果。

Answer 1

是的，你可以，我建议使用bwizard.js和bwizard.css插件。并向表单添加一个按钮，现在你将不得不使用ajax调用该操作，而不是使用提交类型的实际输入。使用jQuery，成功的＆＃34; btn_submit＆＃34;你可以通过给每个标签指定一个第二个标签来集中注意力，或者你可以使用页面检查器并定位每个标签的默认值，如果我记得正确的话，那就是＃step1等。

带有PHP多页表单的Bootstrap Wizard插件？

1 个答案: