如何将选项卡中的表单控制到选项卡面板中的其他选项卡？

Question

我有选项卡面板。我在选项卡面板的第一个选项卡中有一个表单。我想在第一个选项卡面板中填写表单中的所有内容，并且控件应该转到第二个选项卡。我dnt如何在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

呼叫下面按钮功能点击

function ValidData() 
{ 
    var $myForm = $('#customer');   
    if ($myForm[0].checkValidity()) {    
     //Activate next tab code goes here 
    } 
    return false; 
} 

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更轻松地识别和互动。