Placing tabs inside a form

0

I have an html document with tabs. This is OK. Now, inside one of these tabs, I have a form, where I put my controls. I could not put inside this form more tabs, so that would have a document and inside it two tabs and within these tabs, but controls in forms or not.

The div tabs-2, is already a tab, which is part of the main tab. Inside this tab, I have a form and inside it some controls. What I'm wanting is to put two more tabs inside that form which is inside a tab. That's the intention, that is, the question I do not know why it took downvote. The subtab is that it is the new tabs to be inside the main tab. The position of the tabs should be at the bottom of the page.

<div id="tabs-2">
   <form class="form-horizontal" role="form">

       <div id="subtabs">
           <li><a href="#tabs-11">EventosPDV</a></li>
           <li><a href="#tabs-21">Minhas Tarefas</a></li>
       </div>

      <div class="form-group">
        <label for="txtCnpj" class="col-md-2 control-label">CNPJ:</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
        </div>
          <label for="imgStatus" class="col-md-2 control-label">Status:</label>
          <div class="col-md-2">
              <img src="~/Images/Certo.png" class="img-responsive col-md-4 control-label" id="imgStatus"/>
        </div>
      </div>

       <div class="form-group">
        <label for="lblRazao" class="col-md-2 control-label">Razão Social:</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
        </div>
      </div>

       <div class="form-group">
        <label for="lblIdEvento" class="col-md-2 control-label">ID Evento:</label>
        <div class="col-md-2">
          <input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
        </div>
      </div>

       <div class="form-group">
        <label for="lblDescricao" class="col-md-2 control-label">Descrição:</label>
        <div class="col-md-3">
          <textarea class="form-control" id="txtDescricao" placeholder="Digite uma descrição" rows="4"></textarea>
        </div>
           <label for="lblTipoEvento" class="col-md-2 control-label">Tipo Evento:</label>
        <div class="col-md-3">
          <select class="form-control" name="ddlTipoEvento" id="ddlTipoEvento" >
              <option selected="selected" value="0"></option>
                <option value="2">Acesso Remoto</option>
                <option value="8">Agendamento de Visita Técnica</option>
                <option value="6">Alteração de Cadastro</option>
                <option value="9">Ativar PDV</option>
                <option value="4">Contato Comercial</option>
                <option value="11">Contato Técnico</option>
                <option value="10">Inativar PDV</option>
                <option value="15">Instalação Extrator Cod. Interno</option>
                <option value="16">Processo 2</option>
                <option value="14">Processo Interno PDV</option>
                <option value="12">Sem Intervenção Técnica</option>
                <option value="1">Visita Técnica</option>
          </select>
        </div>
      </div>

       <div class="form-group">
        <label for="lblAcao" class="col-md-2 control-label">Ação:</label>
        <div class="col-md-3">
          <select class="form-control" id="ddlAcao" >
              <option selected="selected" value="0"></option>
                <option value="2">Acesso Remoto</option>
                <option value="8">Agendamento de Visita Técnica</option>
                <option value="6">Alteração de Cadastro</option>
                <option value="9">Ativar PDV</option>
                <option value="4">Contato Comercial</option>
                <option value="11">Contato Técnico</option>
                <option value="10">Inativar PDV</option>
                <option value="15">Instalação Extrator Cod. Interno</option>
                <option value="16">Processo 2</option>
                <option value="14">Processo Interno PDV</option>
                <option value="12">Sem Intervenção Técnica</option>
                <option value="1">Visita Técnica</option>
          </select>
        </div>
        <label for="lblUsuario" class="col-md-2 control-label">Usuário:</label>
        <div class="col-md-3">
          <select class="form-control" id="ddlUsuario" >
              <option selected="selected" value="0"></option>

          </select>
        </div>
      </div>

       <div class="form-group">
           <label for="lblUsuario" class="col-md-2 control-label">Usuário:</label>
            <div class="col-md-3">
              <input type="text" class="datepicker"/>
            </div>
           <button type="button" class="btn btn-success">Finalizar</button>
        </div>       

       <div id="tabs-11">
       </div>

       <div id="tabs-21">
       </div>

   </form>
  </div>
    
asked by anonymous 24.06.2014 / 23:18

1 answer

1

Solved. I created a jquery function for another set of tabs:

$(function () {
    $("#subtabs").tabs();
});

And then I put my html that will create the tabs in position in I want the tabs. With that it worked.

<div id="subtabs"style="border:none">
           <ul>
               <li><a href="#tabs-11">EventosPDV</a></li>
               <li><a href="#tabs-21">Minhas Tarefas</a></li>
           </ul>
......
</div>
    
30.06.2014 / 21:00