タブのフォームからタブパネルの別のタブに制御を渡すにはどうすればよいですか？

Question

私はタブパネルを持っています。タブパネルの最初のタブにフォームがあります。フォームのすべての内容を最初のタブパネルに入力し、コントロールを2番目のタブに移動します。私はjqueryでそれを行う方法をdntしました。最初のタブで

 <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> 

形ですべての詳細を充填した後、私は2番目のタブにコントロールを与えたい

この

は、タブ構造です。 jqueryでそれを与える方法？誰もがこれで私を助けることができますか？ボタンの中の関数以下

Answer 1

コールページをロードし、現在のステップを示すために、JavaScriptで変数を設定し、各ステップでフォームを送信した後

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

Answer 2

をクリックします。それを使用して正しいタブを設定し、すべてのタブを無効にして、正しいタブを有効にします。

だから、このような何か：

<?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 
?> 

それはあなたがすべてのあなたのコードを投稿していないので、実際のページが一緒に置かれている方法を少しは不明だが、それは解決策の骨子です。特定のDOM要素にID、名前、データ属性などを追加して、javascriptで識別してやりとりするのをより簡単にしたいと思うでしょう。