4

Preciso fazer o serialize() somente nas linhas selecionadas com o checkbox

<form id='form'>
<table class='table table-bordered'>
    <thead>
        <tr>
            <th>Código</th>
            <th>Produto</th>
            <th>Valor</th>
            <th>Quantidade</th>
            <th>Seleção</th>
        </tr>            
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td><input type='text' name='produto[]' id='produto1' value='Produto 001'></td>
            <td><input type='text' name='valor[]' id='valor1'></td>
            <td><input type='number' name='quantidade[]' id='qtd1'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao1' value='0'></td>
        </tr>
        <tr>
            <td>002</td>
            <td><input type='text' name='produto[]' id='produto2' value='Produto 002'></td>
            <td><input type='text' name='valor[]' id='valor2'></td>
            <td><input type='number' name='quantidade[]' id='qtd2'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao2' value='1'></td>
        </tr>
        <tr>
            <td>003</td>
            <td><input type='text' name='produto[]' id='produto3' value='Produto 003'></td>
            <td><input type='text' name='valor[]' id='valor3'></td>
            <td><input type='number' name='quantidade[]' id='qtd3'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao3' value='2'></td>
        </tr>
       <tr>
            <td>004</td>
            <td><input type='text' name='produto[]' id='produto4' value='Produto 004'></td>
            <td><input type='text' name='valor[]' id='valor4'></td>
            <td><input type='number' name='quantidade[]' id='qtd4'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao4' value='3'></td>
        </tr>
        <tr>
            <td>005</td>
            <td><input type='text' name='produto[]' id='produto1' value='Produto 005'></td>
            <td><input type='text' name='valor[]' id='valor5'></td>
            <td><input type='number' name='quantidade[]' id='qtd5'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao1' value='4'></td>
        </tr>
        <tr>
            <td>006</td>
            <td><input type='text' name='produto[]' id='produto6' value='Produto 006'></td>
            <td><input type='text' name='valor[]' id='valor6'></td>
            <td><input type='number' name='quantidade[]' id='qtd6'></td>
            <td><input type='checkbox' name='selecao[]' id='selecao6' value='5'></td>
        </tr>        
    </tbody>
</table>
                <div id='error'></div>
<input type='submit' name='salvar' id='salvar' value='Salvar'>

código javaScript

$(document).ready(function(){
            $('#form').submit(function(){   //Ao submeter formulário
                confirma = confirm("Confirma geração do pedido?");
                if(confirma){   
                    $.ajax({            //Função AJAX
                        url:"gerarPedido.php",          //Arquivo php
                        type:"get",             //Método de envio
                        beforeSend: function(){ $("#salvar").val('Aguarde...');},
                        data: $('#form').serialize(),   //Dados
                            success: function (resposta){           //Sucesso no AJAX
                                $("#error").slideDown();
                                    if (resposta != false) {
                                         // Exibe o erro na div
                                        $("#error").html(resposta);
                                        $("#salvar").val('Gerar Pedido');
                                    }else {
                                     $("#salvar").val('Gerar Pedido');
                                    }

                            }

                    })                  
                    return false;   //Evita que a página seja atualizada
                }
                    return false;   //Evita que a página seja atualizada
            })
        })

Da forma que esta meu código esta passando todos os campos do form, mas eu quero fazer o serialize(), somente nas linhas que forem selecionadas pelo checkbox. Esta table é somente um exemplo no meu projeto ela é dinâmica e pode ter bem mais linha.

3 Respostas 3

3

Acredito que não exista uma forma direta de se fazer isto, enão você vai precisar percorrer todas as linhas, verificando quais estão marcadas, agrupar os inputs relacionados, para então serializar os mesmos.

var form = $("#form");
var linhas = $("tbody tr", form);
var salvar = $("#salvar");

salvar.click(function (event) {
  var selecionados = linhas.filter(function (indice, linha) {  
    return linha.querySelector("[name='selecao[]']").checked;
  }).find(":input");
  
  console.log(selecionados.serialize());
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='form'>
  <table class='table table-bordered'>
    <thead>
      <tr>
        <th>Código</th>
        <th>Produto</th>
        <th>Valor</th>
        <th>Quantidade</th>
        <th>Seleção</th>
      </tr>            
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td><input type='text' name='produto[]' id='produto1' value='Produto 001'></td>
        <td><input type='text' name='valor[]' id='valor1'></td>
        <td><input type='number' name='quantidade[]' id='qtd1'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao1' value='0'></td>
      </tr>
      <tr>
        <td>002</td>
        <td><input type='text' name='produto[]' id='produto2' value='Produto 002'></td>
        <td><input type='text' name='valor[]' id='valor2'></td>
        <td><input type='number' name='quantidade[]' id='qtd2'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao2' value='1'></td>
      </tr>
      <tr>
        <td>003</td>
        <td><input type='text' name='produto[]' id='produto3' value='Produto 003'></td>
        <td><input type='text' name='valor[]' id='valor3'></td>
        <td><input type='number' name='quantidade[]' id='qtd3'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao3' value='2'></td>
      </tr>
      <tr>
        <td>004</td>
        <td><input type='text' name='produto[]' id='produto4' value='Produto 004'></td>
        <td><input type='text' name='valor[]' id='valor4'></td>
        <td><input type='number' name='quantidade[]' id='qtd4'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao4' value='3'></td>
      </tr>
      <tr>
        <td>005</td>
        <td><input type='text' name='produto[]' id='produto1' value='Produto 005'></td>
        <td><input type='text' name='valor[]' id='valor5'></td>
        <td><input type='number' name='quantidade[]' id='qtd5'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao1' value='4'></td>
      </tr>
      <tr>
        <td>006</td>
        <td><input type='text' name='produto[]' id='produto6' value='Produto 006'></td>
        <td><input type='text' name='valor[]' id='valor6'></td>
        <td><input type='number' name='quantidade[]' id='qtd6'></td>
        <td><input type='checkbox' name='selecao[]' id='selecao6' value='5'></td>
      </tr>        
    </tbody>
  </table>
  <div id='error'></div>
  <input type='submit' name='salvar' id='salvar' value='Salvar'>
</form>

BONUS

Caso precise realizar este filtro sem o uso de jQuery:

var form = document.getElementById("form");
var linhas = form.querySelectorAll("tbody tr");
var salvar = document.getElementById("salvar");

salvar.addEventListener("click", function (event) {
  var formData = new FormData();  
  var selecionados = [].filter.call(linhas, function (linha, indice) {  
    return linha.querySelector("[name='selecao[]']").checked;
  });  
  selecionados.forEach(function (linha, indice) {
    var inputs = linha.querySelectorAll("input");
    [].forEach.call(inputs, function (input, indice) {
      formData.append(input.name, input.value);
    });
  });
  event.preventDefault();
});
4
  • Ok, este é o caminho mas esta retornando assim: produto%5B%5D=Produto+005&valor%5B%5D=&quantidade%5B%5D=&selecao%5B%5D=4&produto%5B%5D=Produto+006&valor%5B%5D=&quantidade%5B%5D=&selecao%5B%5D=5 26/10/2015 às 19:41
  • @PauloAmaral o retorno fica desta forma por causa do atributo name que você coloca na sua tag input 26/10/2015 às 19:41
  • @PauloAmaral, quando você faz $("#form").serialize() ele retorna a seguinte string: produto%5B%5D=Produto+001&valor%5B%5D=&quantidade%5B%5D=&produto%5B%5D=Produto+002&valor%5B%5D=&quantidade%5B%5D=&selecao%5B%5D=1&produto%5B%5D=Produto+003&valor%5B%5D=&quantidade%5B%5D=&produto%5B%5D=Produto+004&valor%5B%5D=&quantidade%5B%5D=&produto%5B%5D=Produto+005&valor%5B%5D=&quantidade%5B%5D=&selecao%5B%5D=4&produto%5B%5D=Produto+006&valor%5B%5D=&quantidade%5B%5D=, então está tudo ok. 26/10/2015 às 19:45
  • ok, obrigado funcionou aqui 26/10/2015 às 19:59
3

Você pode usar o parent() para acessar a tr do checkbox selecionado e fazer um serialize dele, exemplo:

var tr = $('#form input:checkbox:checked').parent().parent();
tr.find(':input').serialize();

Veja funcionando no jsfiddle

4
  • 2
    Gabriel, acho interessante delimitar um escopo para o seu seletor $('#form input:checkbox:checked'), fora isto está perfeito. 26/10/2015 às 19:49
  • @TobyMosque, obrigado pela dica. 26/10/2015 às 19:51
  • também funciona obrigado 26/10/2015 às 19:59
  • 1
    @GabrielRodrigues, uma coisa que eu sempre esqueço sobre o jQuery, é que os métodos dele sempre percorrem todos os membros da coleção... incluse o método parent, que pela logica era para fazer o mesmo do parentNode e trazer apenas o pai de um nó... e por fim apenas uma sugestão pessoal, eu gosto de diminuir o uso de Method chaining, então no lugar de .parent().parent(), você poderia ter usado .parent('tr'), isto até ajudaria a deixar claro no codigo qual elemento você quer (mas como disse, isto é apenas uma sugestão pessoal, nada que faça melhorar a sua resposta). 27/10/2015 às 11:12
2

Teria que ser algo assim:

$('#form input[type=checkbox]:checked').serialize()
2
  • Isto vai serializar apenas os checked, ele deseja serializar toda a linha onde o checkbox foi selecionado. 26/10/2015 às 19:24
  • Já tentei isto, mas me retorna somente os valores dos checkbox selecionados, e os demais campos não 26/10/2015 às 19:26

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 .