Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

criar Form dinâmico com jquery e chamar ajax

olá!

Estou tentando chamar o Ajax para atualizar dados com o PHP ondé passo o id do produto, quantidade e valor do item.

        $.ajax({
            type: "POST", 
            data: dados.serialize(),
            url: "venda.php",
            asynsc: false
        }).done(function (data){
                        elementoTR.remove();
                }
        );

O ajax e o venda.php estão esperando dados via POST... ai estou tentando criar dinâmico um FORM que passe as informações necessárias mas estou com dificuldades :(.

Para cada item da lista é calculado o valor até ai tudo certo mas preciso fazer o UPDATE no banco caso seja alterado quantidade ou valor.

Veja abaixo:

var lstCalculaQtdItens = document.querySelectorAll("#lista_item_quantidade");

for (var i = 0; i < lstCalculaQtdItens.length; i++) {

    lstCalculaQtdItens[i].addEventListener("change", function(event) {
        event.preventDefault();
        calculaTotalItens();
    });
}

function calculaTotalItens(){

    var lstItens = document.querySelectorAll("#lista_item_chave");

    var quantidade = "";
    var valor      = "";
    var vlrTotal   = 0;
    var idItem     = 0;

    for (var i = 0; i < lstItens.length; i++) {
        var indexTR = $(lstItens[i]).closest('tr').find('td');
        idItem     = indexTR.children('#lista_item_id').val();
        quantidade = indexTR.children('#lista_item_quantidade').val();
        valor      = indexTR.children('#lista_item_valor').val();        
        vlrTotal   += quantidade * valor;

        criaFormTmp( idItem, quantidade, valor);
    }

    $('#LISTA-TOTAL-VALOR-ITENS').text(vlrTotal.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

}


function criaFormTmp(id, qtd, vlr){
    var tmpform = document.createElement('form');
    tmpform.setAttribute('method', 'POST');
    tmpform.setAttribute('name'  , 'FORM-TMP');
    tmpform.setAttribute('id'    , 'FORM-TMP');
    tmpform.setAttribute('action', '');

    // --- Criando o Input text
    var i1 = document.createElement('input');
    i1.setAttribute('type' , 'text');
    i1.setAttribute('name' , 'ACAOFORM');
    i1.setAttribute('id'   , 'ACAOFORM');
    i1.setAttribute('value', 'ADICIONAR-ITEM');    

    var i2 = document.createElement("input");
    i2.setAttribute('type' , 'text');
    i2.setAttribute('name' , 'id_produto');
    i2.setAttribute('id'   , 'id_produto');
    i2.setAttribute('value', id);    

    var i3 = document.createElement('input');
    i3.setAttribute('type' , 'text');
    i3.setAttribute('name' , 'item_quantidade');
    i3.setAttribute('id'   , 'item_quantidade');
    i3.setAttribute('value', qtd);    

    var i4 = document.createElement('input');
    i4.setAttribute('type' , 'text');
    i4.setAttribute('name' , 'item_valor');
    i4.setAttribute('id'   , 'item_valor');
    i4.setAttribute('value', vlr);    

    var btn = document.createElement('input');
    btn.setAttribute('type' , 'button');
    btn.setAttribute('value', 'Submit');
    btn.setAttribute('id'   , 'btn-tmp');    
    btn.setAttribute('name' , 'btn-tmp');    
    btn.setAttribute('onsubmit','return false;');

    tmpform.appendChild(i1);    
    tmpform.appendChild(i2);    
    tmpform.appendChild(i3);
    tmpform.appendChild(i4);
    tmpform.appendChild(btn);

    $('body').append(tmpform);
   $('#FORM-TMP').trigger("submit");
}

Após tento pegar o evento de SUBMIT do form criado.

var ftmTMP = document.querySelectorAll("#FORM-TMP");

for (var i = 0; i < ftmTMP.length; i++) {
    ftmTMP[i].addEventListener("submit", function(event) {
                                                        event.preventDefault();
                                                        alert(     $(this) );
                                        });
}

Aqui a página entra em loop e fica recarregando. Nem o alert consigo chamar mesmo com o preventDefault.

Se alguém poder ajudar agradeço desde já.

2 respostas

Boa noite, Alberto! Como vai?

Uma coisa que não entendi: pq vc não envia os dados diretamente? Qual o motivo de criar esse formulário?

Acho que pra facilitar vc poderia enviar os dados sem a necessidade de criar esse formulário aí. Daí seria só usar AJAX para fazer o envio dos dados para o seu back-end.

solução!

Fala Gabriel obrigado pelo retorno. Então estava fazendo exatamente isso... Enviando direito e chamando outro .php e pegando as informações. Mas vi a necessidade de ficar algo mais dinâmico para o usuário. Ai optei pelo ajax. A ideia é ter uma lista onde teria a quantidade e valor. Quando o usuário mudar a quantidade seria calculado o total e o item afetado seria atualizado no banco.