Question

我有标签面板。我在选项卡面板的第一个选项卡中有一个表单。我想在第一个选项卡面板中填写表单中的所有内容，控件应该转到第二个选项卡。我知道如何在jquery中做到这一点。

这是标签结构：

      <div class="wizard-inner">
            <ul class="nav nav-tabs" role="tablist">

                <li role="presentation" class="active">
                    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">Customer
                    </a>
                </li>

                <li role="presentation" class="disabled">
                    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> Person
                    </a>
                </li>
                <li role="presentation" class="disabled">
                    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> Equipment
                    </a>
                </li>
                 <li role="presentation" class="disabled">
                    <a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4"> Address
                    </a>
                </li>
                <li role="presentation" class="disabled">
                    <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> Cart
                    </a>
                </li>
            </ul>
        </div>

第一个标签中的

表单：

<form name="customer" id="customer" method="post" action="#step2">
                                <div class="form-inline">
                                <div class="pad col-md-6">
                                <div class="form-group col-md-12">
                                    <label for="exampleInputEmail1">First Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" name="fname" placeholder="First Name" required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="exampleInputEmail1">Last Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" name="lname" placeholder="Last Name" required>
                                </div>
                                <div class="form-group col-md-12 padd">
                                  <label for="exampleInputEmail1">Gender</label>
                                    <select name="gender" id="gender" class="dropselectsec1" required>
                                                    <option value="">Select Gender</option>
                                                    <option value="male">Male</option>
                                                    <option value="female">Female</option>
                                                </select>
                                </div>
                                <div class="form-group col-md-12 padd">
                                  <label for="exampleInputEmail1">Skill level</label>
                                    <select name="visa_status" id="g" class="r" required>
                                                    <option value="">Select Skill level</option>
                                                    <option value="df">cv</option>
                                                    <option value="df">xc</option>
                                                    <option value="df">df</option>
                                                </select>
                                </div>

                                 <div class="form-group col-md-12 inc">

                                </div>  


                                </div>
                                <div class="pad col-md-6">
                                  <div class="form-group col-md-12 padd">
                                  <label for="exampleInputEmail1">fg</label>
                                    <input type="text" class="form-control" name="age" id="exampleInputName" placeholder="Age" required>
                                  </div>
                                    <div class="form-group col-md-12 padd">
                                    <label for="exampleInputEmail1">fgf</label>
                                    <input type="text" class="form-control" name="height" id="exampleInputName" placeholder="Height * (cm)" required>
                                  </div>
                                  <div class="form-group col-md-12 padd">
                                  <label for="exampleInputEmail1">fgfg</label>
                                   <input type="text" class="form-control" name="weight" id="exampleInputName" placeholder="Weight * (kg)" required>
                                  </div>
                                  <div class="form-group col-md-12 padd">
                                  <label for="exampleInputEmail1">ffg</label>
                                   <input type="text" class="form-control" name="shoesize" id="exampleInputName" placeholder="Shoe size *" required>
                                  </div>
                                </div>

                                <input type="submit" name="save" class="btn btn-primary next-step" value="Continue"/>

                             </form>

填写表单中的所有详细信息后，我想将控件提供给第二个选项卡。如何在jquery中给它？任何人都可以帮助我吗？

Answer 1

点击按钮

调用以下功能

<div class="container">

    <div class="row">

        <div class="col-lg-12">

            <div class="page-header">
                <h4>Debug Messages</h4>
            </div>

            <textarea wrap="off" rows="15" readonly class="form-control"><?php echo $debug_messages; ?></textarea>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-12">

            <div class="page-header">
                <h4>Informational Messages</h4>
            </div>

            <textarea wrap="off" rows="15" readonly class="form-control"><?php echo $informational_messages; ?></textarea>

        </div>

    </div>

</div>

Answer 2

在每个步骤中提交表单后，加载页面并在javascript中设置变量以指示当前步骤。然后使用它来设置正确的选项卡禁用所有选项卡，然后激活正确的选项卡。

这样的事情：

<?php
// logic to determine current step...
$step = 'step1'; // or 'step2', 'step3', etc
?>

<script>
$(function() {
    var current_step = <?php echo $step; ?>;
    // reset all li elements under any div that has a "wizard-inner" class 
    $('div.wizard-inner li').removeClass('active').addClass('disabled');

    // set the correct tab as active.  you'd have to add an this id to the appropriate DOM element
    $('#step1-tab').addClass('active');
})
</script>

<?php
// more php code
?>

由于您尚未发布所有代码，因此有点不清楚您的实际页面是如何组合在一起的，但这是解决方案的要点。您可能希望将id，名称，数据属性等添加到某些DOM元素中，以便使用javascript更容易识别和交互。

如何从选项卡中的表单控制到选项卡面板中的另一个选项卡？

2 个答案: