POST提交后保持Tab导航激活及表单数据留存的实现方法
2026-7-8
解决Bootstrap Tab表单提交后激活状态丢失与数据保留问题
一、表单数据完整保留处理
现有代码已尝试用$_POST回显输入框值，但未处理未提交时的报错和下拉框选中状态，需补充以下修改：
输入框值回显（修复未提交报错）
对所有输入框的value属性增加isset判断，避免首次加载时因$_POST不存在引发Notice错误：<input type="text" name="sayi1" placeholder="" value="<?php echo isset($_POST['sayi1']) ? $_POST['sayi1'] : ''; ?>" required="" class="form-control">同理处理
sayi2字段。下拉框选中状态回显
针对kargo和secim下拉框，给匹配$_POST值的选项添加selected属性：<select name="kargo" class="form-control"> <option value="26.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '26.99' ? 'selected' : ''; ?>>26.99</option> <option value="46.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '46.99' ? 'selected' : ''; ?>>46.99</option> <option value="49.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '49.99' ? 'selected' : ''; ?>>49.99</option> </select>secim下拉框同理处理：<select name="secim" class="form-control"> <option value="+" <?php echo isset($_POST['secim']) && $_POST['secim'] == '+' ? 'selected' : ''; ?>>Hesap</option> </select>
二、保持提交后的Tab激活状态
提交后页面刷新会重置Tab的active类，需通过隐藏字段记录提交的Tab ID，再动态渲染激活状态：
给每个表单添加隐藏字段
在每个Tab的表单内添加隐藏字段标记当前Tab ID，以hes1表单为例：<form action="#hes1" method="post"> <input type="hidden" name="active_tab" value="hes1"> <!-- 原有表单内容 --> </form>同理给
hes2、hes3的表单添加对应value="hes2"、value="hes3"的隐藏字段。PHP动态控制Tab的激活类
在页面顶部定义$active_tab变量，默认值为hes1，提交后取表单传递的Tab ID：<?php $active_tab = isset($_POST['active_tab']) ? $_POST['active_tab'] : 'hes1'; ?>然后修改导航栏和Tab内容的
class属性，根据$active_tab动态添加active show类：- 导航栏部分：
<ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3"> <li class="nav-item"> <a data-toggle="pill" href="#hes1" class="nav-link <?php echo $active_tab == 'hes1' ? 'active show' : ''; ?>"> <i class="fas fa-credit-card mr-2"></i> Hesap1 </a> </li> <li class="nav-item"> <a data-toggle="pill" href="#hes2" class="nav-link <?php echo $active_tab == 'hes2' ? 'active show' : ''; ?>"> <i class="fab fa-paypal mr-2"></i> Hesap2 </a> </li> <li class="nav-item"> <a data-toggle="pill" href="#hes3" class="nav-link <?php echo $active_tab == 'hes3' ? 'active show' : ''; ?>"> <i class="fas fa-mobile-alt mr-2"></i> Hesap3 </a> </li> </ul> - Tab内容部分：
<div id="hes1" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes1' ? 'active show' : ''; ?>"> <!-- hes1表单内容 --> </div> <div id="hes2" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes2' ? 'active show' : ''; ?>"> <!-- hes2表单内容 --> </div> <div id="hes3" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes3' ? 'active show' : ''; ?>"> <!-- hes3表单内容 --> </div>
- 导航栏部分：
修改后的完整代码示例
<?php $active_tab = isset($_POST['active_tab']) ? $_POST['active_tab'] : 'hes1'; ?> <div class="row"> <div class="col-lg-6 mx-auto"> <div class="card"> <div class="card-header"> <div class="bg-white shadow-sm pt-4 pl-2 pr-2 pb-2"> <!-- Credit card form tabs --> <ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3"> <li class="nav-item"> <a data-toggle="pill" href="#hes1" class="nav-link <?php echo $active_tab == 'hes1' ? 'active show' : ''; ?>"> <i class="fas fa-credit-card mr-2"></i> Hesap1 </a> </li> <li class="nav-item"> <a data-toggle="pill" href="#hes2" class="nav-link <?php echo $active_tab == 'hes2' ? 'active show' : ''; ?>"> <i class="fab fa-paypal mr-2"></i> Hesap2 </a> </li> <li class="nav-item"> <a data-toggle="pill" href="#hes3" class="nav-link <?php echo $active_tab == 'hes3' ? 'active show' : ''; ?>"> <i class="fas fa-mobile-alt mr-2"></i> Hesap3 </a> </li> </ul> </div> <!-- End --> <!-- Credit card form content --> <div class="tab-content"> <!-- credit card info--> <div id="hes1" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes1' ? 'active show' : ''; ?>"> <form action="#hes1" method="post"> <input type="hidden" name="active_tab" value="hes1"> <div class="form-group"> <label for="username"> <h6>Girilen Fiyat</h6> </label> <input type="text" name="sayi1" placeholder="" value="<?php echo isset($_POST['sayi1']) ? $_POST['sayi1'] : ''; ?>" required="" class="form-control"> </div> <div class="form-group"> <label for="cardNumber"> <h6>Kampanya Oranı</h6> </label> <div class="input-group"> <input type="text" name="sayi2" placeholder="" value="<?php echo isset($_POST['sayi2']) ? $_POST['sayi2'] : ''; ?>" class="form-control" required=""> <div class="input-group-append"> <span class="input-group-text text-muted"> <i class="fab fa-cc-visa mx-1"></i> <i class="fab fa-cc-mastercard mx-1"></i> <i class="fab fa-cc-amex mx-1"></i> </span> </div> </div> </div> <div class="row"> <div class="col-sm-8"> <div class="form-group"> <label><span class="hidden-xs"> <h6>Kargo Oranı</h6> </span></label> <div class="input-group"> <select name="kargo" class="form-control"> <option value="26.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '26.99' ? 'selected' : ''; ?>>26.99</option> <option value="46.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '46.99' ? 'selected' : ''; ?>>46.99</option> <option value="49.99" <?php echo isset($_POST['kargo']) && $_POST['kargo'] == '49.99' ? 'selected' : ''; ?>>49.99</option> </select> </div> </div> </div> <div class="col-sm-4"> <div class="form-group mb-4"> <label data-toggle="tooltip" title="" data-original-title="Three digit CV code on the back of your card"> <h6>Hesap <i class="fa fa-question-circle d-inline"></i></h6> </label> <select name="secim" class="form-control"> <option value="+" <?php echo isset($_POST['secim']) && $_POST['secim'] == '+' ? 'selected' : ''; ?>>Hesap</option> </select> </div> </div> </div> <div class="card-footer"> <button type="submit" name="kontrol" class="subscribe btn btn-primary btn-block shadow-sm"> Hesapla </button> </div> </form> <div class="container"> <table class="table table-striped"> <?php if(isset($_POST["kontrol"])) { $sayi1=$_POST["sayi1"]; $sayi2=$_POST["sayi2"]; $sayi3=100; $secim=$_POST["secim"]; $kargo=$_POST["kargo"]; $sonuc=0; $sonuc2=0; $sonuc3=0; if($secim == '+') { $sonuc=$sayi1*$sayi2/$sayi3; $sonuc3=$sayi1-$sonuc; $sonuc2=$sayi1+$sayi2; $sonuc4=$sonuc3*12/100; $sonuc5=$sonuc3-$sonuc4; } echo "<h1 class='text-info'>Musterinin Alacagi=$sonuc3</h1>"; echo "<h1 class='text-info'>Komisyon=$sonuc4</h1>"; echo "<h1 class='text-info'>Kargo=$kargo</h1>"; echo "<h1 class='text-info'>Kazanc=$sonuc5</h1>"; echo "<h1 class='text-info'>KargosendenKazanc=$sonuc5</h1>"; } ?> </table> </div> </div> <!-- hes2表单（示例结构） --> <div id="hes2" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes2' ? 'active show' : ''; ?>"> <form action="#hes2" method="post"> <input type="hidden" name="active_tab" value="hes2"> <!-- 此处添加hes2表单内容，参考hes1的方式处理数据回显 --> </form> </div> <!-- hes3表单（示例结构） --> <div id="hes3" class="tab-pane fade pt-3 <?php echo $active_tab == 'hes3' ? 'active show' : ''; ?>"> <form action="#hes3" method="post"> <input type="hidden" name="active_tab" value="hes3"> <!-- 此处添加hes3表单内容，参考hes1的方式处理数据回显 --> </form> </div> </div> </div> </div> </div> </div>
内容的提问来源于stack exchange，提问作者Erol K
相关产品推荐
相关产品推荐
