Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola Galera.
Boa tarde!
Td bem com vcs?
Tenho um codigo de script ele roda perfeitamente, mas ele possui um detalhezinho, o resultado é apresentado dentro de um input text.
teria como algum me ajudar em cima deste codigo a tirar o resultado do input e apresentar fora do input?
<input type="checkbox" name="sabor" id="evento_value1" value="28.00">
<input type="checkbox" name="sabor" id="evento_value2" value="28.00">
<input type="text" size="5" id="evento_value" onclick="AddValor()" disabled="disabled"/>
<script type="text/javascript">
var total = 0;$(':checkbox').click(function() {
//Atribui o valor do input p/ variável 'valor'
var valor = parseInt($(this).val());
//Se o checkbox for marcado ele soma se não subtrai
if ($(this).is(":checked")) {
total += valor;
} else {
total -= valor;
}
//Atribui o valor ao input
$("#evento_value").val(total);
});
</script>Bom dia, Wanderval!
Td bem com você?
Me desculpa, o resultado pode ser em uma div ou span, tirando do input.... rsrsrs
Obrigado deu certinho era oque eu precisava.
Tenho mais uma duvida como eu coloco para ficar assim R$: 0,00??
Esta assim 00.
>
10 horas atrás, lezão disse:
Bom dia, Wanderval!
Td bem com você?
Me desculpa, o resultado pode ser em uma div ou span, tirando do input.... rsrsrs
Obrigado deu certinho era oque eu precisava.
Tenho mais uma duvida como eu coloco para ficar assim R$: 0,00??
Esta assim 00.
entenda esse código
function formatPrice(value, currency = true) {
var valor = parseFloat(value);
let valorFormatado = null;
if(currency) {
//Valor com cifrão
valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}
else {
//Valor sem cifrão
valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
}
return valorFormatado;
}
link: [https://jsbin.com/supawilawu/edit?html,js,output](https://jsbin.com/supawilawu/edit?html,js,output)Boa tarde, Wanderval!
Td bem com você?
Meu amigo sei q você sempre me ajudou, mas agora estou precisando de mais um help seu.
Preciso acrescentar juntamente com esse codigo um select q multica qnd eu escolho um valor 1 ou 2 ele multiplica o valor.
veja a imagem abaixo para você entender oq estou dizendo.
No caso eu seleciono o primeiro Produto que custa $25,00 e seleciono o numero 2 o total seria $50,00, assim por dianteJS:
function changedValue(event, id) {
var atualValue = $('#'+id+' .currency-check').val();
var quantity = event.currentTarget.value;
var newValue = calcValue(quantity, atualValue);
console.log(newValue, quantity, atualValue, id);
updateCardValue(id, newValue)
}
function updateCardValue(cardId, newValue) {
$('#'+cardId+' .currency-value-displayed').text(formatPrice(newValue, false));
$('#'+cardId+' .total-value').val(newValue);
}
function calcValue(quantity, price) {
return parseInt(quantity) * parseFloat(price);
}
function formatPrice(value, currency = true) {
var valor = parseFloat(value);
let valorFormatado = null;
if(currency) {
//Valor com cifrão
valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}
else {
//Valor sem cifrão
valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
}
return valorFormatado;
}
HTML:
<div id="card_1" class="box-container">
<section class=box-image>
<img src="" style="border-radius:10px" width="250px" height="230px"/>
</section>
<section class="box-content">
<label class="title">
<div align="left"><b>A MODA DA CASA</b></div>
</label>
<span class="description">
<div align="left">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano</div>
</span>
</section>
<section class=box-image-2>
<label class="title">
<div align="center"><b class="currency-value-displayed">28,00</b></div>
</label>
<span class="description">
<div align="left"><br/>
<input type="checkbox" name="sabor" id="evento_value" class="currency-check" value="28,00">
<input type="hidden" name="vl_sabor" class="total-value"value="28,00">
<SELECT name="qntdade" onchange="changedValue(event, 'card_1')">
<option value="1">1</option>
<option value="2">2</option>
</SELECT>
</div></span>
</section>
</div>
[https://jsbin.com/hukerubeve/edit?html,js,output](https://jsbin.com/hukerubeve/edit?html,js,output)Boa noite, wanderval!
Cara ficou show de bola, mas eu não expliquei direito.
Na vdd queria q ele apenas multiplicasse dentro dessa div id="resultado" que esta na tarja preta
acesso a pagina no link abaixo:
http://mercatotal.com.br/pizzaria/cardapio.php
tentei colocar essa class="currency-value-displayed" no lugar da div e junto tbm, naun deu em nada.
Primeiro ponto seu HTML está utilizando tabela pra montar o layout, isso é desaconselhável considerado uma má pratica atualmente
e utilizar atributos de estilização no html so quando é um framework, mas se você está fazendo manualmente então isso deixa o html muito confuso, vai começar a ficar complexa a manutenção.
Ex de html pro card:
<div class="box-container custom" product-id="01" >
<div class="container-image">
<img src="https://pizzariadesucesso.com/wp-content/uploads/2018/05/pizza_R_l5_3.jpg" style="border-radius: 10px;" width="75px" height="75px" />
</div>
<div class="container-info">
<div class="container-description">
<span class="title">MODA DA CASA</span>
<span class="description">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.</span>
</div>
<div class="container-currency">
<span class="currency-value-displayed">28.00</span>
<input type="checkbox" name="sabor" id="evento_value2" class="currency-check" value="28.00" />
<select name="qntdade" onchange="changedQuantity(event, '01')">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
JS
var total = 0;
var itemsDoPedido = [];
$(":checkbox").click(function () {
var cardContainer = $(this).parents('.box-container');
var id = $(cardContainer).attr('product-id');
if ($(this).is(":checked")) {
addItem(this, cardContainer, id)
} else {
removeItem(cardContainer, id);
}
updateTotal(id, cardContainer);
});
function addItem(itemRef, cardContainer, id) {
var valor = $(itemRef).val();
var quantity = $(cardContainer).find('select').val();
var pedido = itemsDoPedido.find(item => item.id == id);
if(pedido) {
pedido.quantidade = quantity;
itemsDoPedido = [...itemsDoPedido, pedido];
} else {
var produto = createProductObject(id, quantity, valor);
itemsDoPedido.push(produto);
}
}
function removeItem(cardContainer, id) {
var pedido = itemsDoPedido.find(item => item.id == id);
if(pedido) {
itemsDoPedido = itemsDoPedido.filter(item => item.id != id);
}
}
function changedQuantity(event, id) {
var cardContainer = $('.box-container[product-id="'+id+'"]');
var isChecked = $(cardContainer).find(":checkbox").is(":checked");
var quantity = $(cardContainer).find('select').val();
if(isChecked) {
itemsDoPedido.find(item => {
if(item.id === id){
item.quantidade = quantity;
}
});
}
updateTotal(id, cardContainer);
}
function updateTotal(id, cardContainer) {
total = calcValue(itemsDoPedido);
const pedido = itemsDoPedido.filter(item => item.id === id);
const totalValueItem = calcValue(pedido);
$(cardContainer).find('.total-value').val(totalValueItem);
$("#resultado").text(formatPrice(total));
}
function calcValue(productList) {
return productList.reduce(function(acumulador, valorAtual) {
return acumulador + (parseInt(valorAtual.quantidade) * parseFloat(valorAtual.valor));
},0);
}
function createProductObject(id, quantity, valor){
var produtoModel = {
id: id,
quantidade:quantity,
valor: valor
};
return produtoModel;
}
function formatPrice(value, currency = true) {
var valor = parseFloat(value);
let valorFormatado = null;
if(currency) {
//Valor com cifrão
valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}
else {
//Valor sem cifrão
valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
}
return valorFormatado;
}
[https://jsbin.com/gikewuvesi/edit?html,js,output](https://jsbin.com/gikewuvesi/edit?html,js,output)Sugestão de melhoria no layout
Layout original
/applications/core/interface/imageproxy/imageproxy.php?img=https://s1.imghub.io/sCktV.png&key=80e33c28b950227fdb71df32864e1775cbdb6aaef9bae3a520829f52a2ca3405" width="1000" data-imageproxy-source="https://s1.imghub.io/sCktV.png" />
Alternativa 1
/applications/core/interface/imageproxy/imageproxy.php?img=https://s1.imghub.io/sChi2.png&key=eb38ba7e5f768c13b23df8798f40f8622803c550becabbbe38459bbf4b78e73f" width="1000" data-imageproxy-source="https://s1.imghub.io/sChi2.png" />
Alternativa 2
/applications/core/interface/imageproxy/imageproxy.php?img=https://s1.imghub.io/sC0Gm.png&key=1a6ea8492af66f3dd77d8618718225e56a1935de5598cdac51d3f0cf8af0dc26" width="1000" data-imageproxy-source="https://s1.imghub.io/sC0Gm.png" />
Layout original lista
/applications/core/interface/imageproxy/imageproxy.php?img=https://s1.imghub.io/sC1aT.png&key=27bf3b3ffc03f2c7f38bb33859a545a73ec6048f24ca7355cd4f8edef4bfdd16" width="1000" data-imageproxy-source="https://s1.imghub.io/sC1aT.png" />
Alternativa
/applications/core/interface/imageproxy/imageproxy.php?img=https://s1.imghub.io/sCtgS.png&key=071d5eb9b5fa5de5476415c2eea8e12248c1d9e321b8b6cbef6fcfe3ddff317f" width="1000" data-imageproxy-source="https://s1.imghub.io/sCtgS.png" />
Links imagem:
https://imghub.io/i/sCktV
https://imghub.io/i/sChi2
https://imghub.io/i/sC0Gm
https://imghub.io/i/sC1aT
https://imghub.io/i/sCtgS
Link jsbin
Fazer isso é fácil, mas você não falou como espera que funcione assim fica difícil!
1- Tirar do input e colocar onde? em uma div? em um span?
//Atribui o valor ao input