형식 내의 탭 패널

저는 부트 스트랩을 처음 사용하고 있으며 의심 스럽습니다. 여러 탭 패널에서 양식의 필드를 나눌 수 있고 동적 탭을 사용하고 하나의 양식으로 양식을 제출할 수 있도록 양식 내에 tabpanels을 넣을 수 있습니까? 예를 들어, 아래 코드가 있습니다. 형식 내의 탭 패널

<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 -->

나는 두상에서 tabpanels을 갖고 싶어, 그래서 동적 탭을 사용할 수 있습니다,하지만 난 하나 개의 형태로 모든 필드를 제출해야합니다. 것이 가능하다? 나는이 주제에 대해 조사해 보았습니다. 여러분이 jQuery로 직렬화하면 다른 양식이 단지 하나만 보낼 수 있다고 말하는 몇몇 사람들을 읽었습니다. 이 경우 유효한 대체 방법입니까?

추신 : 나는 또한 Stackoverflow에서 새롭다. 그래서 내 질문을 만든 방식에 어떤 실수가 있다면, 나는 그것을 고칠 수 있도록 말해 달라. 그리고 필드의 이름은 포르투갈어입니다. 왜냐하면 저는 Brazillian이고 시험으로 사용될 응용 프로그램을 만들려고하기 때문입니다. 이름이 이해하기 어렵다면 알려주세요. 번역 할 수 있습니다.

출처

2017-11-16 Lucas Ferreira

당신은 자바 스크립트를 사용하여이 작업을 수행 할 수 있어야한다 :

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

를 양식은 ID가있는 경우 :

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

}

을

출처

2017-11-16 22:46:23

형식 내의 탭 패널

답변

관련 문제