2

Tenho uma tabela dinâmica, onde posso adicionar ou remover uma linha, quando adiciono uma nova linha eu consigo enviar oque ta escrivo pelo form... Porém não quanto tento enviar via ajax , só envia a primeira linha. Como seria o certo para enviar todas as novas linhas?

Código html

<table id="table" class="table table-striped table-bordered table-hover" data-url="data1.json" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" class="table table-striped table-condensed">
    <thead>
        <tr class="text-center">
            <th data-field="categoria" data-radio="true">Nº do Item</th>
            <th data-field="categoria" data-radio="true">Quantidade</th>
            <th data-field="categoria" data-radio="true">Preço unitário</th>
            <th data-field="categoria" data-radio="true">Regra destribuição</th>
            <th data-field="categoria" data-radio="true">Total</th>
            <th>-</th>
        </tr>
    </thead>
    <tbody>
        <tr class="linhas odd gradeX">
            <td><input type="text"  name="item_cod[]" id="item_cod" /></td>
            <td><input type="text"  name="quantidade[]" id="quantidade"/></td>
            <td><input type="text"  name="preco_und[]" id="preco_und" /></td>
            <td><input type="text"  name="regra_dest[]" id="regra_dest" /></td>
            <td><input type="text"  name="total[]" id="total" /></td>
            <td>
                <a href="#" class="btn btn-danger evento-btn-excluir tooltip-info excluir removerCampo"  data-toggle="tooltip" data-placement="top" title="Excluir" value="">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <input type="text" name="qtdLinhas" id="qtdLinhas" value="1" style="width:40px;" />
                <a href="#" class="adicionarCampo"  data-toggle="tooltip" data-placement="top" title="Adicionar linha">                                               
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </a>
            </td>
        </tr>
    </tbody>
</table>                    
<button  id="enviar" class="btn btn-success text-right" type="submit">
    <i class="fa fa-fw fa-save"></i> Salvar
</button>

ADICIONAR E REMOVER LINHAS

$(function () {
 function removeCampo() {
 $("removerCampo").off("click");
 $(".removerCampo").on("click", function (){
  if($("tr.linhas").length > 1){
  $(this).parent().parent().remove();
  }   }); }  

$(".adicionarCampo").on("click", function (){
 var qtdLinhas = $("#qtdLinhas").val();
  for ( var i = 0 ; i < qtdLinhas ; i++ ){ 
   novoCampo = $("tr.linhas:first").clone(); 
   novoCampo.find("input").val(""); 
   novoCampo.insertAfter("tr.linhas:last"); 
   removeCampo(); } }); });

AJAX

$(document).ready(function(){    

    $('#enviar').click(function(){

        var item_cod = (document.getElementById('item_cod').value);
        var quantidade = (document.getElementById('quantidade').value);
        var preco_und = (document.getElementById('preco_und').value);
        var regra_dest = (document.getElementById('regra_dest').value);
        var total = (document.getElementById('total').value);
        var fornecedor =  (document.getElementById('fornecedor').value); 
        var data_lancamento = (document.getElementById('data_lancamento').value); 


        $.ajax({       
            type:"POST",            
            url:'./produtos/cadastrar-produto',                   
            data:{
                item_cod:item_cod,
                quantidade:quantidade,              
                preco_und:preco_und,
                regra_dest:regra_dest,
                total:total,
                fornecedor:fornecedor,
                data_lancamento:data_lancamento,                      
                _token: $('input[name="_token"]').val()
            },  
        });           
    }); 
});
3
  • Ao que me parece, vc está enviando arrays e no ajax está tratando como string. No Ajax vc teria que criar arrays também.
    – Diego
    Commented 27/01/2016 às 18:47
  • Já tinha dado uma pesquisada sobre isso, mas não tinha achado a forma correta Commented 27/01/2016 às 19:07
  • Pra que os arrays nos inputs? Acho que não há tal necessidade
    – Leonardo
    Commented 27/01/2016 às 19:35

1 Resposta 1

1

Bom, inicialmente retirei alguns valores do código javascript que não tinha no html, após isso o código praticamente funcionou, fiz ajustes para não gastar variáveis etc:

HTML: (fiz pequenos ajustem em parâmetros errados)

<table id="table" class="table table-striped table-bordered table-hover table-condensed" data-url="data1.json" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
    <thead>
        <tr class="text-center">
            <th data-field="categoria" data-radio="true">Nº do Item</th>
            <th data-field="categoria" data-radio="true">Quantidade</th>
            <th data-field="categoria" data-radio="true">Preço unitário</th>
            <th data-field="categoria" data-radio="true">Regra destribuição</th>
            <th data-field="categoria" data-radio="true">Total</th>
            <th>-</th>
        </tr>
    </thead>
    <tbody>
        <tr class="linhas odd gradeX">
            <td><input type="text"  name="item_cod[]" id="item_cod" /></td>
            <td><input type="text"  name="quantidade[]" id="quantidade"/></td>
            <td><input type="text"  name="preco_und[]" id="preco_und" /></td>
            <td><input type="text"  name="regra_dest[]" id="regra_dest" /></td>
            <td><input type="text"  name="total[]" id="total" /></td>
            <td>
                <a href="#" class="btn btn-danger evento-btn-excluir tooltip-info excluir removerCampo"  data-toggle="tooltip" data-placement="top" title="Excluir">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                </a>
            </td>
        </tr>

        <tr>
            <td colspan="6">
                <input type="text" name="qtdLinhas" id="qtdLinhas" value="1" style="width:40px;" />
                <a href="#" class="adicionarCampo"  data-toggle="tooltip" data-placement="top" title="Adicionar linha">                                               
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </a>
            </td>
        </tr>
    </tbody>
</table>                    
<button  id="enviar" class="btn btn-success text-right" type="submit">
    <i class="fa fa-fw fa-save"></i> Salvar
</button> 

Javascript 01: (Usando o $.ajax)

$(document).ready(function(){    

    $("#enviar").click(function(){

        $.ajax({       
            type:"POST",            
            url:'recebe.php',                   
            data:{
                item_cod:       $('#item_cod').val(),
                quantidade:     $('#quantidade').val(),              
                preco_und:      $('#preco_und').val(),
                regra_dest:     $('#regra_dest').val(),
                total:          $('#total').val()
            },
            success: function(retorno) {
                alert(retorno);
            }
        });  
    });           
});

Javascript 02: (usando $.post)

$(document).ready(function(){    

    $("#enviar").click(function(){ 
        $.post('recebe.php', 
            'item_cod='    + $('#item_cod').val()  +
            '&quantidade=' + $('#quantidade').val() +
            '&preco_und='  + $('#preco_und').val()  +
            '&regra_dest=' + $('#regra_dest').val() +
            '&total='      + $('#total').val(),
        function(retorno){
            alert(retorno);
        });
    });           
});

PHP: (retorna todos os valores caso sucesso, ou 'fail' caso dê falha)

<?php

if(isset($_POST['item_cod']) && isset($_POST['quantidade']) && isset($_POST['preco_und']) &&
   isset($_POST['regra_dest']) && isset($_POST['total'])) {

    echo $_POST['item_cod']." - ".$_POST['quantidade']." - ".$_POST['preco_und']." - ".
        $_POST['regra_dest']." - ".$_POST['total'];
} else {

    echo 'fail';
}

?>
3
  • Meu velho muito obrigado, me salvou muito, já tava a 3 dias parado nisso procurando o jeito de fazer! brigadao! Commented 27/01/2016 às 22:11
  • Se a resposta resolveu o problema clique no sinal de certo () a esquerda dela para que outros membros possam ver que a pergunta teve uma resposta válida.
    – Leonardo
    Commented 27/01/2016 às 22:35
  • tive que usar serialize para passar o array... Commented 28/01/2016 às 13:11

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 .