.serialize() only lines marked with checkbox

Asked

Viewed 346 times

4

I need to serialize() only on the lines selected with the 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'>

Javascript code

$(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
            })
        })

As this my code is passing all the fields of the form, but I want to serialize(), only in the lines that are selected by the checkbox. This table is only an example in my project it is dynamic and can have much more line.

javascript html ajax

3 answers

3


I believe that there is no direct way to do this, so you will not need to go through all the lines, checking which are marked, grouping the related inputs, to then serialize the same.

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

If you need to perform this filter without using 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();
});

  • Okay, this is the way but it’s returning like this: product%5B%5D=Product+005&value%5B%5D=&quantity%5B%5D=&selection%5B%5D=4&product%5B%5D=Product+006&value%5B%5D=&quantity%5B%5D=&selection%5B%5D=5

  • @Pauloamaral the return is this way because of the name attribute you put in your input tag

  • @Pauloamaral, when you do $("#form").serialize() it returns the following 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=, then it’s okay.

  • Okay, thanks worked here

3

You can use the parent() to access the tr of the selected checkbox and make a serialize of it, example:

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

See working on jsfiddle

  • 2

    Gabriel, I find it interesting to delimit a scope for your selector $('#form input:checkbox:checked'), outside this is perfect.

  • @Tobymosque, thanks for the tip.

  • also works thanks

  • 1

    @Gabrielrodrigues, one thing I always forget about jQuery, is that his methods always go through all the members of the collection... include the method parent, that by logic was to do the same of parentNode and bring only the father of a knot... and finally just a personal suggestion, I like to decrease the use of Method chaining, then in place of .parent().parent(), you could have used .parent('tr'), this would even help to make clear in the code which element you want (but as I said, this is just a personal suggestion, nothing that makes your response better).

2

It would have to be something like this:

$('#form input[type=checkbox]:checked').serialize()

  • This will serialize only checked ones, it wants to serialize the entire line where the checkbox was selected.

  • I tried this, but returns only the values of the checkbox selected, and the other fields not

Browser other questions tagged javascript html ajax

You are not signed in. Login or sign up in order to post.