Question

我有一个步骤向导表单，里面有多个面板，我想在使用php提交后保持在同一个面板上。让我们说我在第2步提交，我希望它留在第2步（第2小组）我已经尝试了，但是当我提交页面加载时，它将我带回第1步（面板1），而不是停留在第2步（面板2）。我该如何解决这个问题？

贝娄是我的代码

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">


        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    </head>
    <body>
        <div class="container">
            <ul class="nav nav-pills nav-wizard">
                <li class="active"><a href="#step-1" data-toggle="tab" aria-expanded="false"><span class="nmbr">1</span>Verification</a></li>
                <li><a href="#step-2" data-toggle="tab" aria-expanded="false"><span class="nmbr">2</span>Form</a></li>
            </ul>
            <form action="stack.html" method="post" enctype="multipart/form-data" >


                <div class="panel panel-borderless setup-content" id="step-1" style="margin-top:8px">


                    <label style="font-weight:normal">Code:</label>
                    <input type="string" name="code" />
                    <label style="font-weight:normal">Name:</label>
                    <input type="text" name="name" />

                    <button class="btn btn-primary nextBtn pull-right" type="button" name="next1" onclick="nextPrev(1)">Next</button>

                </div>

                <div class="panel panel-borderless setup-content" id="step-2" style="margin-top:8px">


                    <label style="font-weight:normal">item Code:</label>
                    <input type="string" name="itemcode" />
                    <label style="font-weight:normal">item Name:</label>
                    <input type="string" name="itemname" />


                    <button class="btn btn-primary nextBtn pull-right" type="submit" name="add">add</button> 
                </div>

            </form>


            <script>
                $(document).ready(function () {

                    var navListItems = $('.nav-wizard li a'),
                            allWells = $('.setup-content'),
                            allNextBtn = $('.nextBtn');
                    dis = $('#step-1');

                    allWells.hide();
                    dis.show();

                    navListItems.click(function (e) {
                        e.preventDefault();
                        var $target = $($(this).attr('href')),
                                $item = $(this);

                        if (!$item.hasClass('disabled')) {
                            navListItems.removeClass('btn-success').addClass('btn-default');
                            $item.addClass('btn-success');
                            allWells.hide();
                            $target.show();
                            $target.find('input:eq(0)').focus();
                        }
                    });

                    allNextBtn.click(function () {
                        var curStep = $(this).closest(".setup-content"),
                                curStepBtn = curStep.attr("id"),
                                nextStepWizard = $('.nav-wizard li a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                                curInputs = curStep.find("input[type='text'],input[type='url']"),
                                isValid = true;

                        $(".form-group").removeClass("has-error");
                        for (var i = 0; i < curInputs.length; i++) {
                            if (!curInputs[i].validity.valid) {
                                isValid = false;
                                $(curInputs[i]).closest(".form-group").addClass("has-error");
                            }
                        }

                        if (isValid)
                            nextStepWizard.removeAttr('disabled').trigger('click');
                    });

                    $('.nav-wizard li a.btn-success').trigger('click');
                });

            </script> 
        </div>
    </body>
</html>

谢谢

在使用具有多个面板的一个表单时，如何使用PHP提交表单后保持在同一个面板上

0 个答案: