當達到最後一個標籤時提交多標籤頁

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 index是製表符的索引。

爲了測試，我必須擁有頁面上的所有代碼，但是您應該可以通過註釋和調試器來弄清楚它。