CodeIgniter+Bootstrap：提交前标签页表单后解锁后续标签页

嘿，别担心，新手阶段遇到这种分步表单的需求太正常啦！我来帮你实现“必须提交前一个标签页的表单才能打开下一个”的功能，一步步来：

第一步：修正你的标签页HTML结构 #

你当前的tab-content里三个标签页都加了active类，这会导致所有标签页同时显示，先把这个问题改过来，并且给需要禁用的标签页添加标记：

<div class="nav-tabs-custom">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#dtpasien" data-toggle="tab">Data Pasien</a></li>
    <!-- 给后面的标签页添加disabled类，默认不能点击 -->
    <li class="disabled"><a href="#dtmds" data-toggle="tab">Data Medis</a></li>
    <li class="disabled"><a href="#odontogram" data-toggle="tab">Odontogram</a></li>
  </ul>
  <div class="tab-content">
    <!-- 只有第一个标签页默认激活显示 -->
    <div class="active tab-pane" id="dtpasien">
      <!-- 这里放你的第一个表单 -->
      <form id="formPasien">
        <!-- 表单字段，记得加required属性做前端基础验证 -->
        <input type="text" name="nama" required placeholder="Nama Pasien">
        <button type="submit">Submit Data Pasien</button>
      </form>
    </div>
    <div class="tab-pane" id="dtmds">
      <!-- 第二个表单 -->
      <form id="formMedis">
        <input type="text" name="diagnosa" required placeholder="Diagnosa">
        <button type="submit">Submit Data Medis</button>
      </form>
    </div>
    <div class="tab-pane" id="odontogram">
      <!-- 第三个表单 -->
      <form id="formOdontogram">
        <input type="text" name="gigi" required placeholder="Status Gigi">
        <button type="submit">Submit Odontogram</button>
      </form>
    </div>
  </div>
</div>

第二步：添加CSS优化禁用标签的样式（可选） #

给禁用的标签页加个灰掉的样式，让用户直观知道不能点击：

.nav-tabs > li.disabled > a {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

第三步：用JavaScript控制标签页解锁逻辑 #

因为Bootstrap依赖jQuery，我们用jQuery来处理表单提交和标签页解锁：

$(document).ready(function() {
  // 第一个表单提交事件
  $('#formPasien').submit(function(e) {
    e.preventDefault(); // 先阻止默认提交，先做验证
    
    // 先做前端基础验证，再结合后端验证
    if (this.checkValidity()) {
      // 表单验证通过，解锁第二个标签页
      $('.nav-tabs li:eq(1)').removeClass('disabled');
      // 可选：自动切换到第二个标签页
      $('.nav-tabs a[href="#dtmds"]').tab('show');
      
      // 发送表单数据到CodeIgniter后端控制器
      $.ajax({
        url: '<?= base_url('pasien/save') ?>', // 替换成你的CI控制器路径
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
          alert('Data Pasien berhasil disimpan!');
        },
        error: function() {
          alert('Terjadi kesalahan, coba lagi!');
        }
      });
    } else {
      // 触发HTML5原生表单验证提示
      this.reportValidity();
    }
  });

  // 第二个表单提交事件，解锁第三个标签页
  $('#formMedis').submit(function(e) {
    e.preventDefault();
    
    if (this.checkValidity()) {
      $('.nav-tabs li:eq(2)').removeClass('disabled');
      $('.nav-tabs a[href="#odontogram"]').tab('show');
      
      // 发送到CI后端
      $.ajax({
        url: '<?= base_url('medis/save') ?>',
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
          alert('Data Medis berhasil disimpan!');
        },
        error: function() {
          alert('Terjadi kesalahan, coba lagi!');
        }
      });
    } else {
      this.reportValidity();
    }
  });

  // 第三个表单提交处理（按需调整）
  $('#formOdontogram').submit(function(e) {
    e.preventDefault();
    
    if (this.checkValidity()) {
      $.ajax({
        url: '<?= base_url('odontogram/save') ?>',
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
          alert('Semua data berhasil disimpan!');
        },
        error: function() {
          alert('Terjadi kesalahan, coba lagi!');
        }
      });
    } else {
      this.reportValidity();
    }
  });
});

针对CodeIgniter新手的关键提示 #

• 记得在CI的config.php里配置好base_url，这样<?= base_url() ?>才能正常工作。
• 后端验证不能少！ 前端验证只是给用户友好提示，一定要在CI控制器里用$this->form_validation->set_rules()设置严格的验证规则，防止非法数据提交。
• 如果不想用AJAX提交，也可以用普通表单提交：提交成功后在控制器里设置会话标记（比如$_SESSION['pasien_submitted'] = true），然后在视图里判断这个标记来决定是否解锁下一个标签页。

内容的提问来源于stack exchange，提问作者kitcat