1

Possuo uma Togglable tabs e gostaria de serializar os dados apenas do índice atual ou seja do active da tab.

Este form é "global" por assim dizer, e esta tabs fica dentro, um exemplo disto seria:

<form>
  <div class="servicos">
    <label>foo</label>
    <input type="text" name="foo">
    <label>foo</label>
    <input type="text" name="bar">
  </div>
  <div class="configuracoes">
    <label>foo2</label>
    <input type="text" name="foo2">
    <label>foo2</label>
    <input type="text" name="bar2">
  </div>
  <button id="enviar">Enviar</button>
</form>

Digamos que eu esteja na tab "configurações" ao salvar gostaria de pegar apenas foo2,bar2.

Ja tentei fazer assim:

$("form").submit(function(e) {
  e.preventDefault();
  $(this).find('.configuracoes').serialize();
});

O retorno do serialize é vazio,como eu poderia serializar parcialmente um form ?

3
  • $(this).find('.active').serialize(); Quando a tab está visivel, a classe .active é adicionado ao elemento. Então com esse codigo ele só pegará os valores do que estiver dentro do elemento que está visivel. Commented 24/02/2016 às 19:05
  • @Gilsones esta é exatamente a forma como testei, se você observar o meu exemplo. Commented 24/02/2016 às 19:11
  • Tenta assim então: $(this).find('.active [name]').serialize(); Assim ele vai pegar todos os elementos que tenham o atributo name (campos, texarea, select, radio, checkbox...) e vai serializar Commented 24/02/2016 às 19:13

1 Resposta 1

1

Testei aqui e deu certo, com a mesma ideia que comentei.

$(function(){

  $("#enviar").on("click", function( e ) {
      e.preventDefault();
  
      alert( $("#formulario").find(".active [name]").serialize() );
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<form id="formulario">

<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#servicos" data-toggle="tab">Serviços</a></li>
        <li class="nav"><a href="#configuracoes" data-toggle="tab">Configurações</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active servicos" id="servicos">
            <br>
            <label>foo</label>
            <input type="text" name="foo">
            <label>foo</label>
            <input type="text" name="bar">
        </div>
        <div class="tab-pane fade configuracoes" id="configuracoes">
            <br>
            <label>foo2</label>
            <input type="text" name="foo2">
            <label>foo2</label>
            <input type="text" name="bar2">
        </div>
    </div>
</div>

<br>
<input type="submit" value="Enviar" id="enviar">
  
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .