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á.