How to do a serialize of a certain part of the form?

Question

How to do a serialize of a certain part of the form?

Navigation

#1 by (1 votes)

1

I have a Togglable tabs and would like to serialize the data only from the current index or the active of the tab.

This form is "global" so to speak, and this tabs stays inside, an example of this would be:

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

Let's say I'm on the "settings" tab when saving I'd like to just get foo2,bar2 .

I've tried to do this:

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

The return of the serialize is empty, how could I partially serialize a form?

jquery twitter-bootstrap

asked by anonymous 24.02.2016 / 19:59

1 answer

Place fixed cryptographic key How to delete a DIV if there is a word in another DIV in jQuery?

score 1 · Accepted Answer

I tested it here and it worked, with the same idea I mentioned.

$(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><scriptsrc="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>