Soma e Multiplicação de valores variáveis

Djorgenes · Julho 8, 2014

Olá a todos!!

Gostaria que voces me ajudassem no seguinte:

Estou desenvolvendo um projeto em que se vende pizzas pela internet e o cliente tem que entrar com algumas informações sobre a pizza que deseja pedir.

Primeiro o cliente seleciona o nome da pizza que deseja (em uma caixa de seleção de opções "select"), depois escolhe o tamanho ("input type="radio"). Ao clicar no tamanho, aparece o valor daquela pizza no tamanho escolhido.

Depois o cliente seleciona a quantidade ("select option") e escolhe o recheio da borda da pizza. Cada recheio tem um preço. O cliente faz a opção em "select option" também. Quando escolhe "catupiry" por exemplo, aparece o valor embaixo de R$ 2,00.

Preciso de ajuda para o seguinte:

Quero que, quando o cliente selecionar a quantidade, esta seja multiplicada pelo valor unitário da pizza, aparecendo o resultado no lugar do valor inicial. Por exemplo, se o cliente selecionar o tamanho "M", aparecerá R$ 15,00, e ao escolher a quantidade 2, quero que no lugar do R$ 15,00 apareça R$ 30,00.

Quero também que apareça um valor total embaixo de tudo, que some o valor da pizza (já com as quantidades multiplicadas) com o valor do recheio para se chegar ao valor total que o cliente irá pagar.

Segue o código javascript:


<script type="text/javascript">

function mostrar_valor(obj) {
	
		document.getElementById('valor_pq').style.display="none";
		document.getElementById('valor_md').style.display="none";
		document.getElementById('valor_gd').style.display="none";
	
	switch (obj.id) {
		case 'pg':
		document.getElementById('valor_pq').style.display="block";
		break
		
		case 'md':
		document.getElementById('valor_md').style.display="block";
		break
		
		case 'gd':
		document.getElementById('valor_gd').style.display="block";
		break
		
		}
}



function optionRecheio() {
	var option = document.getElementById('options').value;
		if(option == "catup"){
            document.getElementById("valorCatupiry").style.display="block";
			document.getElementById("valorCheddar").style.display ="none";
			document.getElementById("valorChocolate").style.display ="none";
			document.getElementById("valorMussarela").style.display ="none";
        }
		if(option == "chedd"){
            document.getElementById("valorCatupiry").style.display="none";
			document.getElementById("valorCheddar").style.display ="block";
			document.getElementById("valorChocolate").style.display ="none";
			document.getElementById("valorMussarela").style.display ="none";
        }
		if(option == "choc"){
            document.getElementById("valorCatupiry").style.display="none";
			document.getElementById("valorCheddar").style.display ="none";
			document.getElementById("valorChocolate").style.display ="block";
			document.getElementById("valorMussarela").style.display ="none";
        }
		if(option == "muss"){
            document.getElementById("valorCatupiry").style.display="none";
			document.getElementById("valorCheddar").style.display ="none";
			document.getElementById("valorChocolate").style.display ="none";
			document.getElementById("valorMussarela").style.display ="block";
        }
}

</script>

segue código html:

<body>

<div>
Escolha sua pizza: 
	<select>
		<option>Selecione</option>
		<option>Quatro queijos</option>
		<option>Baiana</option>
		<option>Calabreza</option>
		<option>Portuguesa</option>
		
	</select>
</div>

<br />
<br />

<div>
<input type="radio" onclick="mostrar_valor(this);" id="pg" name="tamanho" > P
<input type="radio" onclick="mostrar_valor(this);" id="md" name="tamanho" > M
<input type="radio" onclick="mostrar_valor(this);" id="gd" name="tamanho" > G
</div>

<br />

<div id="valor_pq" style="display:none;">R$ 10,00</div>
<div id="valor_md" style="display:none;">R$ 15,00</div>
<div id="valor_gd" style="display:none;">R$ 20,00</div>

<br />
<br />

<div>
	<label>Qtde.: 
		<select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        </select>
	</label><br />
</div>

<br />
<br />

<div>
	Escolha o recheio da borda
		<select id="options" onchange="optionRecheio()">
			<option>Selecione</option>
			<option value="catup">Catupiry</option>
			<option value="chedd">Cheddar</option>
			<option value="choc">Chocolate</option>
			<option value="muss">Mussarela</option>
		</select>
</div>

<br />
<br />

Valor do recheio:

<label id="valorCatupiry" style="display:none;">R$ 2,00</label>
<label id="valorCheddar" style="display:none;">R$ 2,00</label>
<label id="valorChocolate" style="display:none;">R$ 4,00</label>
<label id="valorMussarela" style="display:none;">R$ 3,00</label>

<br />

Total Total:



</body>

Alguém me ajuda em mais essa, por favor??

Abraços!! Agradeço desde já!

wilnet · Julho 8, 2014

De uma olhada nesses dois tópicos, São bem legais, talvez ajude na sua Soma.

Tópico 01

Tópico 02

Espero que ajude em algo.

Djorgenes · Julho 9, 2014

Obrigado pela tentativa mas não conseguir fazer dar certo...

Tentei adequar os dois casos aqui e não apareceu nenhum total.

Não quero que o total apareça dentro de um input de texto. Quero que apareça o total "solto", dentro da div.

Estou começando a aprender sobre programação web. Nem sei se é possível...

Djorgenes · Julho 9, 2014

Consegui deixar as variáveis dentro de um input texto. Só modifiquei o css para parecer que o valor está "solto"...

Mas não consigo fazer a quantidade de pizzas se multiplicar com o valor que aparece ao se clicar no em cada tamanho, tampouco somar com o preço do recheio da borda...

<script type="text/javascript">

// aparecer o valor de cada tamanho quando se clica no radiobutton correspondente
function mostrar_valor(obj) {
    
        document.getElementById('valor_pq').style.display="none";
        document.getElementById('valor_md').style.display="none";
        document.getElementById('valor_gd').style.display="none";
    
    switch (obj.id) {
        case 'pg':
        document.getElementById('valor_pq').style.display="block";
        break
        
        case 'md':
        document.getElementById('valor_md').style.display="block";
        break
        
        case 'gd':
        document.getElementById('valor_gd').style.display="block";
        break
        
        }
}



// aparecer o valor de cada recheio de borda quando se escolhe no input select o recheio correspondente
function optionRecheio() {
    var option = document.getElementById('options').value;
        if(option == "catup"){
            document.getElementById("valorCatupiry").style.display="block";
            document.getElementById("valorCheddar").style.display ="none";
            document.getElementById("valorChocolate").style.display ="none";
            document.getElementById("valorMussarela").style.display ="none";
 &n

Djorgenes · Julho 10, 2014

var i = 1;

//Definindo quantos campos poderão ser criados (máximo);

var iCamposTotal = 30;

function changeIt(){

if (i <= iCamposTotal) {

my_div.innerHTML += "<input type=\"text\" name=\"unidade"+i+"\" id=\"unidade"+i+"\" value=\"0\" size=\"5\" />";

my_div.innerHTML += "<select size=\"1\" name=\"medidas"+i+"\" id=\"medidas"+i+"\"><option value=\"\"></option><option value=\"unidade\">Unidade</option><option value=\"pecas\">Peças</option><option value=\"radio\">Radio</option><option value=\"modulo\">Modulo</option></select>";

my_div.innerHTML += "<input type=\"text\" id=\"descricao"+i+"\" name=\"descricao"+i+"\" size=\"50\"/>";

my_div.innerHTML += "<input id=\"custo_unitario"+i+"\" name=\"custo_unitario"+i+"\" type=\"text\" size=\"10\"value=\"0\" onblur=\"soma("+i+")\">";

my_div.innerHTML += "<input name=\"total"+i+"\" id=\"total"+i+"\" type=\"text\" size=\"10\" /><br />";

}

i++;

}

</script>

function somafx(){

document.getElementById("total").value = '0'

var unidade = parseFloat(document.getElementById("unidade").value);

var custo_unitario = parseFloat(document.getElementById("custo_unitario").value);

document.getElementById("total").value = custo_unitario * unidade;

}

</SCRIPT>

function soma(i){

document.getElementById("total"+ i).value = '0'

var unidade = parseFloat(document.getElementById("unidade"+ i).value);

var custo_unitario = parseFloat(document.getElementById("custo_unitario"+ i).value);

//a linha acima nao pode ser subistituida por

document.getElementById("total"+ i).value = parseFloat(custo_unitario * unidade);

}

</SCRIPT>

Entrar

Arquivado

Soma e Multiplicação de valores variáveis

Recommended Posts

Djorgenes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Djorgenes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Djorgenes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Djorgenes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante