tenho uma dúvida?! no link abaixo:
Problema de compatibilidade do jQuery1.7.2 para o jQuery 3.3.1
eu tenho um código que me calcula algumas inputs com base no preço, quantidade, subtotal (preço * quantidade) e total geral (soma dos subtotais das inputs), conforme exemplo abaixo:
Acontece que eu gostaria de esconder todas as inputs e ir mostrando conforme eu clicar em um botão, para adicionar novos produtos (inputs). Eu fiz com base no projeto:
Adicionar / remover campos dinamicamente
Porém, como as inputs são geradas no JS eu não consegui fazer funcionar. Alguém poderia me ajudar? É possível?
Segue meu exemplo:
<!doctype html>
<html lang="pt-br">
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.7.2.js" ></script>
<form name="form1" action="" method="post">
<script type="text/javascript">
//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;
//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;
function AddCampos() {
var hidden1 = document.getElementById("hidden1");
var hidden2 = document.getElementById("hidden2");
//Executar apenas se houver possibilidade de inserção de novos campos:
if (iCount < totalCampos) {
//Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
hidden2.value = "";
//Atualizando a lista dos campos que estão ocultos.
//Essa lista ficará armazenada temporiariamente em hidden2;
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
if (document.getElementById("linha"+iLoop).style.display == "none") {
if (hidden2.value == "") {
hidden2.value = "linha"+iLoop;
}else{
hidden2.value += ",linha"+iLoop;
}
}
}
//Quebrando a lista que foi armazenada em hidden2 em array:
linhasOcultas = hidden2.value.split(",");
if (linhasOcultas.length > 0) {
//Tornar visível o primeiro elemento de linhasOcultas:
document.getElementById(linhasOcultas[0]).style.display = "block"; iCount++;
//Acrescentando o índice zero a hidden1:
if (hidden1.value == "") {
hidden1.value = linhasOcultas[0];
}else{
hidden1.value += ","+linhasOcultas[0];
}
/*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
}else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
}else{
hidden2.value = "";
}
*/
}
}
}
function RemoverCampos(id) {
//Criando ponteiro para hidden1:
var hidden1 = document.getElementById("hidden1");
//Pegar o valor do campo que será excluído:
var campoValor = document.getElementById("valor_unitario"+id).value;
//Se o campo não tiver nenhum valor, atribuir a string: vazio:
if (campoValor == "") {
campoValor = "vazio";
}
if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído!\n\nDeseja prosseguir?")){
document.getElementById("linha"+id).style.display = "none"; iCount--;
//Removendo o valor de hidden1:
if (hidden1.value.indexOf(",linha"+id) != -1) {
hidden1.value = hidden1.value.replace(",linha"+id,"");
}else if (hidden1.value.indexOf("linha"+id+",") == 0) {
hidden1.value = hidden1.value.replace("linha"+id+",","");
}else{
hidden1.value = "";
}
}
}
</script>
<script type="text/javascript">
function id( el ){
//return document.getElementById( el );
return $( el );
}
function calcTotal( un01, qnt01 )
{
return un01 * qnt01;
}
function getElementParent(event){
return event.srcElement.parentNode.parentNode.getAttribute('id');
}
function getValorUnitario(elParent){
return $('#'+elParent+' .class_unit input').val();
}
function getQuantidade(elParent){
return $('#'+elParent+' .class_quant input').val();
}
function setFieldTotal(elParent, valueUnit, valueQuant){
id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant));
setTotalFinal();
}
function setTotalFinal(){
var total = 0;
$('#table-shop div .class_total input').each(function(){
if(this.value != ''){
var valor = this.value;
total += parseInt(valor);
}
});
$('#total .value_total').html(total);
$('#total .value_total').val(total);
}
$(document).ready(function(){
id('#table-shop div .class_unit').keyup(function(event)
{
var elemenPai = getElementParent(event);
var valueUnit = getValorUnitario(elemenPai);
var valueQuant = getQuantidade(elemenPai);
setFieldTotal(elemenPai, valueUnit , valueQuant);
});
id('#table-shop div .class_quant').keyup(function(event)
{
var elemenPai = getElementParent(event);
var valueUnit = getValorUnitario(elemenPai);
var valueQuant = getQuantidade(elemenPai);
setFieldTotal(elemenPai, valueUnit , valueQuant);
});
});
</script>
<script type="text/javascript">
//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
document.write("<span id='linha"+iLoop+"' style='display:none'><div class='class_unit'>Valor Unitário "+iLoop+":<input type='text' name='valor_unitario"+iLoop+"' id='valor_unitario"+iLoop+"' /></div><div class='class_quant'>Quantidade "+iLoop+": <input type='text' name='qnt"+iLoop+"' id='qnt"+iLoop+"' value='0' /></div><div class='class_total'>SubTotal "+iLoop+": <input type='text' name='total"+iLoop+"' id='total"+iLoop+"' readonly='readonly' /></div> <input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></span>");
}
</script>
<div id="total">Total: <span class="value_total"></span> </div>
<div id="total">Total: <input class="value_total" readonly></input> </div>
<br><br><br>
<input type="button" value="Adicionar campos" onclick="AddCampos()">
<br><br><input type="text" name="hidden1" id="hidden1">
<input type="hidden" name="hidden2" id="hidden2">
</form>
</body>
</html>
Acontece que consigo mostrar/esconder as inputs, porém não calcula! Agradeço muito.
</>
do editor) para mostrar funcionando.