.serialize () only of the line marked with checkbox

Question

.serialize () only of the line marked with checkbox

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)

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

In the way that my code is passing all form fields, but I want to do serialize (), only on the lines that are selected by the checkbox. This table is only an example in my project it is dynamic and can have a lot more line.

javascript html ajax

asked by anonymous 26.10.2015 / 19:55

3 answers

3

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

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

See working at jsfiddle

26.10.2015 / 20:34

2

It would have to be something like this:

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

26.10.2015 / 20:21

Difference between ListView and ListActivity Send email with Accents BD Uft8

score 3 · Accepted Answer

I believe there is no direct way to do this, then you will have to go through all the lines, checking which ones are checked, grouping the related inputs, and then serializing them.

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><formid='form'><tableclass='tabletable-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><inputtype='text'name='produto[]'id='produto1'value='Produto001'></td><td><inputtype='text'name='valor[]'id='valor1'></td><td><inputtype='number'name='quantidade[]'id='qtd1'></td><td><inputtype='checkbox'name='selecao[]'id='selecao1'value='0'></td></tr><tr><td>002</td><td><inputtype='text'name='produto[]'id='produto2'value='Produto002'></td><td><inputtype='text'name='valor[]'id='valor2'></td><td><inputtype='number'name='quantidade[]'id='qtd2'></td><td><inputtype='checkbox'name='selecao[]'id='selecao2'value='1'></td></tr><tr><td>003</td><td><inputtype='text'name='produto[]'id='produto3'value='Produto003'></td><td><inputtype='text'name='valor[]'id='valor3'></td><td><inputtype='number'name='quantidade[]'id='qtd3'></td><td><inputtype='checkbox'name='selecao[]'id='selecao3'value='2'></td></tr><tr><td>004</td><td><inputtype='text'name='produto[]'id='produto4'value='Produto004'></td><td><inputtype='text'name='valor[]'id='valor4'></td><td><inputtype='number'name='quantidade[]'id='qtd4'></td><td><inputtype='checkbox'name='selecao[]'id='selecao4'value='3'></td></tr><tr><td>005</td><td><inputtype='text'name='produto[]'id='produto1'value='Produto005'></td><td><inputtype='text'name='valor[]'id='valor5'></td><td><inputtype='number'name='quantidade[]'id='qtd5'></td><td><inputtype='checkbox'name='selecao[]'id='selecao1'value='4'></td></tr><tr><td>006</td><td><inputtype='text'name='produto[]'id='produto6'value='Produto006'></td><td><inputtype='text'name='valor[]'id='valor6'></td><td><inputtype='number'name='quantidade[]'id='qtd6'></td><td><inputtype='checkbox'name='selecao[]'id='selecao6'value='5'></td></tr></tbody></table><divid='error'></div><inputtype='submit'name='salvar'id='salvar'value='Salvar'></form>

BONUS

IfyouneedtodothisfilterwithoutusingjQuery:

varform=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();
});