当达到最后一个标签时提交多标签页

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

为了测试，我必须拥有页面上的所有代码，但是您应该可以通过注释和调试器来弄清楚它。