表单中的选项卡面板

Question

我是 Bootstrap 的新手，我有疑问。可以将选项卡面板放在一个表单中，这样我就可以将表单的字段划分为多个选项卡面板，使用动态选项卡并将表单作为一个表单提交吗？作为示例，我有以下代码。

<div class="content-wrapper">    
    <section class="content">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="#aba1" role="tab" data-toggle="tab">Dados Pessoais</a></li>
            <li role="presentation"><a href="#aba2" role="tab" data-toggle="tab">Dados Médicos</a></li>
        </ul>
        <div class="tab-content">
            <form role="form">
            <!-- text input -->
                <div role="tabpanel" class="tab-pane active" id="aba1">
                    <div class="box-header with-border">
                        <h3 class="box-title col-md-12">Dados Pessoais</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="form-row">
                        <div class="form-group col-md-6">
                          <label>Nome do Paciente</label>
                          <input type="text" class="form-control" placeholder="Nome" required="true">
                        </div>
                        <div class="form-group col-md-3">
                          <label>CPF</label>
                          <input type="number" class="form-control" placeholder="CPF">
                        </div>
                        <div class="form-group col-md-3">
                          <label>RG</label>
                          <input type="number" class="form-control" placeholder="RG">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-2">
                          <label>Data de Nascimento</label>
                          <input type="date" class="form-control" placeholder="Data de Nascimento">
                        </div>
                        <div class="form-group col-md-2">
                          <label>Sexo</label>
                          <select class="form-control">
                            <option>Masculino</option>
                            <option>Feminino</option>
                          </select>
                        </div>
                        <div class="form-group col-md-2">
                          <label>Estado Civil</label>
                          <select class="form-control">
                            <option>Solteiro(a)</option>
                            <option>Casado(a)</option>
                            <option>Divorciado(a)</option>
                            <option>Viúvo(a)</option>
                          </select>
                        </div>
                        <div class="form-group col-md-6">
                          <label>Nome do Cônjuge</label>
                          <input type="text" class="form-control" placeholder="Nome do Cônjuge">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                          <label>Endereço</label>
                          <input type="text" class="form-control" placeholder="Endereço">
                        </div>
                        <div class="form-group col-md-3">
                          <label>Bairro</label>
                          <input type="text" class="form-control" placeholder="Bairro">
                        </div>
                        <div class="form-group col-md-3">
                          <label>Cidade</label>
                          <input type="text" class="form-control" placeholder="Cidade">
                        </div>
                        <div class="form-group col-md-2">
                          <label>CEP</label>
                          <input type="text" class="form-control" placeholder="CEP">
                        </div>
                    </div>
                </div>
                <!-- /.tabpanel 1 -->
                <div role="tabpanel" class="tab-pane" id="aba2">
                    <div class="box-header with-border">
                      <h3 class="box-title col-md-12">Dados Médicos</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="form-row">
                        <div class="form-group col-md-6">
                          <label>Nome do Paciente</label>
                          <input type="text" class="form-control" placeholder="Nome">
                        </div>
                        <div class="form-group col-md-3">
                          <label>CPF</label>
                          <input type="number" class="form-control" placeholder="CPF">
                        </div>
                        <div class="form-group col-md-3">
                          <label>RG</label>
                          <input type="number" class="form-control" placeholder="RG">
                        </div>
                    </div>
                </div>
                <!-- /.tabpanel 2 -->
                <div class="row">
                    <!-- left column -->
                    <div class="col">
                      <!-- general form elements -->    
                        <div class="box box-warning">
                            <div class="form-row">
                                <div class="btn-group-left" role="group">
                                  <button type="button" class="btn btn-primary">Anterior</button>
                                  <button type="button" class="btn btn-primary">Próximo</button>
                                </div>
                                <div class="btn-group-right" role="group">
                                  <button type="button" class="btn btn-danger">Cancelar</button>
                                  <button type="submit" class="btn btn-success">Cadastrar</button>
                                  <input type="button"  class="btn btn-success" value="Cadastrar">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.box box-warning -->
                </div>
                <!--/.col -->
            </div>
            <!--/.row -->
            </form>
        </div>
        <!--/.tab-content -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

我想要两个选项卡面板，这样我就可以使用动态选项卡，但我需要将所有字段作为一个表单提交。有可能的？我搜索过这个主题，我读到一些人说，如果你用 jQuery 序列化不同的表格，就可以将它们作为一个发送。在这种情况下，这是一个有效的选择吗？

PS：我也是 Whosebug 的新手，所以如果我提出问题的方式有任何错误，请告诉我，以便我进行更正。字段的名称是葡萄牙语，因为我是巴西人，我正在尝试制作一个应用程序作为测试。如果名称难以理解，请告诉我，以便我翻译。

Answer 1

你应该可以用 JavaScript:

 <input type="button" value="Click Me!" onclick="submitForms()" />

如果您的表单有 ID：

submitForms = function(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();

}

表单中的选项卡面板

Tabpanels within a form

html

forms

jquery

tabpanel

twitter-bootstrap-3