最後のタブに到達したときに複数タブページを送信する

Question

私は6タブを含むマルチタブフォームを持っています。これはデータベースに挿入したいのですが、わかりません。ユーザーが最後のタブをいっぱいにしたときに送信します。また、最後のタブがアクティブなときにボタンを[次へ]ボタンから[送信]ボタンに変更したいと考えました。また、ユーザーが彼の答えを見直して、タブからタブに移動できるようにしたい。 以下は、入力フィールドを検証してプログレスバーを調整するjqueryです。

$(document).ready(function() { 
 
    var $validator = $("#wizardForm").validate({ 
 
    rules: { 
 

 
     emp_fname: { 
 
     required: true 
 
     }, 
 
     emp_lname: { 
 
     required: true 
 
     }, 
 

 
     gender: { 
 
     required: true 
 
     }, 
 

 
     CivilStatus: { 
 
     required: true 
 
     }, 
 

 
     citizenship: { 
 
     required: true 
 
     }, 
 

 
    } 
 
    }); 
 

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

 
    'onNext': function(tab, navigation, index) { 
 
     var $valid = $("#wizardForm").valid(); 
 
     if (!$valid) { 
 
     $validator.focusInvalid(); 
 
     return false; 
 
     } 
 
    }, 
 
    'onTabClick': function(tab, navigation, index) { 
 
     var $valid = $("#wizardForm").valid(); 
 
     if (!$valid) { 
 
     $validator.focusInvalid(); 
 
     return false; 
 
     } 
 
    }, 
 
    }); 
 
}); 
 

 

 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<form id="wizardForm" method="POST"> 
 
    <div class="tab-content"> 
 
    <div class="tab-pane active fade in" id="tab1"> 
 
     <div class="row m-b-lg"> 
 
     <div class="col-md-12"> 
 

 
      <div class="row"> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName">First Name</label> 
 
       <input type="text" class="form-control" name="emp_fname" id="exampleInputName" placeholder="First Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="MiddleName">Middle Name</label> 
 
       <input type="text" class="form-control col-md-6" name="emp_mname" id="MiddleName" placeholder="Middle Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName2">Last Name</label> 
 
       <input type="text" class="form-control col-md-6" name="emp_lname" id="exampleInputName2" placeholder="Last Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName2">Name Extension</label> 
 
       <select id="extension" class="form-control col-md-2 col-xs-12" name="nameExt"> 
 
       <option selected disabled="">---</option> 
 
       <option value="Jr.">Jr.</option> 
 
       <option value="Sr.">Sr.</option> 
 
       </select> 
 
      </div>

これらは、次のタブに行くために、ユーザーを可能にボタンです。

<ul class="pager wizard"> 
 
    <li class="previous"><a href="Add_Emp.php#" class="btn btn-default" name="Previous" id="prev">Previous</a> 
 
    </li> 
 
    <li class="next"><a href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</a> 
 
    </li> 
 
</ul>

Answer 1

理由だけではなく、最後のタブにフォームの送信ボタンを配置しませんか？

必要に応じて、各タブ区画に次のボタンと前のボタンを配置することができます。

上記のフォームコードの一部が欠落しているため、参照するボタンは表示されません。このような

Answer 2

変更ボタン：

<ul class="pager wizard"> 
 
    <li class="previous"><div class="btn btn-default" name="Previous" id="prev">Previous</div> 
 
    </li> 
 
    <li class="next"><div href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</div> 
 
    </li> 
 
    <li class="next"><input type="submit" class="btn btn-default hidden" value="Save" id="btn_save"> 
 
    </li> 
 
</ul>

は、あなたのCSSに追加します。

.hidden { 
    display:none; 
} 

変更するには、上記の持っているJavaScriptに：

$('#rootwizard').bootstrapWizard({ 
    'tabClass': 'nav nav-tabs', 
    onTabShow: function(tab, navigation, index) { 
     var $total = navigation.find('li').length; 
     var $current = index + 1; 
     var $percent = ($current/$total) * 100; 
     $('#rootwizard').find('.progress-bar').css({ 
     width: $percent + '%' 
     }); 
     set_buttons(index); // Set the button enabled and visibility 
    }, 

    'onNext': function(tab, navigation, index) { 
     var $valid = $("#wizardForm").valid(); 
     if (!$valid) { 
     $validator.focusInvalid(); 
     return false; 
     } 
    }, 
    'onTabClick': function(tab, navigation, index) { 
     var $valid = $("#wizardForm").valid(); 
     if (!$valid) { 
     $validator.focusInvalid(); 
     return false; 
     } 
    }, 
    }); 
}); 

// This function sets the buttons enable and visibility based on which tab is active. 
function set_buttons(index) { 
    if(index == 0) { 
     // On first tab, so disable the previous button 
     $('#prev').prop('disabled',true); 
     $('#next').removeClass('hidden');  // Make sure next is visible 
     $('#btn_save').addClass('hidden');  // Make sure save button is hidden. 
    } else if(index == navigation.find('li').length) { 
     // On last tab, so hide the next button, make the save button visible 
     $('#prev').prop('disabled',false);  // Make sure prev is enabled. 
     $('#next').addClass('hidden');   // Make sure next is hidden 
     $('#btn_save').removeClass('hidden'); // Make sure save button is visible. 
    } else { 
     // On a middle tab (not first or last), enable previous and next buttons, hide save button 
     $('#prev').prop('disabled',false);  // Make sure prev is enabled. 
     $('#next').removeClass('hidden');  // Make sure next is visible 
     $('#btn_save').addClass('hidden');  // Make sure save button is hidden. 
    } 
} 

私は上記のコードをテストしていないので、いくつかのエラーがあるかもしれませんが、かなり近いはずです。エラーを探すには、ブラウザのデバッガ（ChromeまたはFireFox）を使用します。私は最後のタブ番号をテストするためにいくつかの仮定をしなければならず、varインデックスはタブのインデックスです。

テストするには、すべてのコードをページに入れておく必要がありますが、コメントとデバッガを使って理解できるはずです。