Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Márcio Incubus

[Resolvido] Botão Limpar Campos

Recommended Posts

Fala galera beleza?

 

Sou iniciante em Javascript e estou fazendo um exercício para um curso. O Exercício é o seguinte: Você informa seu nome, a quantidade de sobremesa, de pratos e de bebidas. Ele calcula o subtotal de cada item (Ele já dá os preços de cada item no inicio e só faz a conta multiplicando pela quantidade) Pois bem, essa parte deu certo, consegui fazer e exibir na tela

 

Porém quando clico no botão Limpar campos até limpa, mas limpa e ainda carrega a função que faz a mensagem aparecer ao clicar "Fechar Pedido" (criei uma função chamada aviso() para esse botão) sendo que não chamo ela no reset. Deve ser alguma coisa besta, vocês podem me auxiliar?

 

Segue o código

 

<script type="text/javascript">
function calculaProd() //Feito por Márcio Camollez Júnior - 983775
{
	var nome = document.getElementById("nome_usu");
	document.getElementById("total").value = '0' //Valor do Campo Total inicia com zero

	//Bebidas
	var precoBebida = "2.30"; //Preco da bebida na variável precoBebida
    var qtBebida = parseFloat(document.getElementById("qt_bebida").value); /*Declara a quantidade de bebida e diz que é tipo de dados float (usa virgula) e "qt_bebida" é o nome do campo que está no html*/
	var subt_Bebida =  document.getElementById("subt_bebida").value = precoBebida * qtBebida; /*Declara a variável subtotal da bebida e diz que o resultado é a multiplicação entre preco e a quantidade digitada*/

	//Pratos	
	var precoPrato = "11.00"; //Preco do Prato
	var qtPrato = parseFloat(document.getElementById("qt_prato").value); /*Declara a quantidade de prato igual a situação da bebida e busca o campo "qt_prato" na tabela html*/
	var subt_pratos = document.getElementById("subt_pratos").value = precoPrato * qtPrato; /*Faz a conta de quantidade digitada vezes o preço que é 11 reais*/


	//Sobremesas
	var precoSobremesa = "4.00"; //Preco da Sobremesa
	var qtSobremesa = parseFloat(document.getElementById("qt_sobremesa").value); /*Declara a quantidade de sobremesa igual a situação da bebida e busca o campo "qt_sobremesa" na tabela html*/
	var subt_sobremesa = document.getElementById("subt_sobremesa").value = precoSobremesa * qtSobremesa; /*Faz a conta de quantidade digitada vezes o preço que é 4 reais*/


	document.getElementById("total").value = subt_Bebida + subt_pratos + subt_sobremesa; //No Campo Total ele exibirá a soma do Subtotal de Bebida, Prato e Sobremesa

}

function aviso(){ //Cria uma função chamada Aviso. Quando clicar em Fechar pedido no final, ele aparece a mensagem que busca o nome e o preco total do pedido
	window.alert("Olá " + document.getElementById("nome_usu").value + ", seu pedido total é de: " + document.getElementById("total").value + " .");
}

</script>

 

 

    <form id="form1" name="form1" action="" method="get" >
   	<table width="500" border="1">
	 <tr>
   <td width="248"><div align="right"><div class="letra">
     <div align="right">Nome do Usuário:</div>
   </div></div></td>
   <td width="236">
     <label>
       <input name="nome_usu" type="text" id="nome_usu" size="30" maxlength="10" />
       </label>    </td>
 </tr>
 <tr>
   <td><div align="right"><div class="letra">Quantidade de Bebidas:</div></div></td>
   <td><label>
     <input name="qt_bebida" type="text" id="qt_bebida" size="10" maxlength="2" onblur="calculaProd()" /> <!--Usei OnBlur pra calcular assim que pressionar a tecla TAB-->
   </label></td>
 </tr>
     <tr>
   <td><div align="right"><div class="letra">Subtotal Bebida:</div></div></td>
   <td><input name="subt_bebida" type="text" id="subt_bebida" size="10" maxlength="10" /></td>
 </tr>
 <tr>
   <td><div align="right"><div class="letra">Quantidade de Pratos:</div></div></td>
   <td><label>
     <input name="qt_prato" type="text" id="qt_prato" size="10" maxlength="2" onblur="calculaProd()" />
   </label></td>
 </tr>
     <tr>
   <td><div align="right"><div class="letra">Subtotal Pratos:</div></div></td>
   <td><input name="subt_pratos" type="text" id="subt_pratos" size="10" maxlength="10" /></td>
 </tr>
 <tr>
   <td><div align="right"><div class="letra">Quantidade de Sobremesas:</div></div></td>
   <td><label>
     <input name="qt_sobremesa" type="text" id="qt_sobremesa" size="10" maxlength="2" onblur="calculaProd()"/>
   </label></td>
 </tr>
     <tr>
   <td><div align="right"><div class="letra">Subtotal Sobremesas:</div></div></td>
   <td><input name="subt_sobremesa" type="text" id="subt_sobremesa" size="10" maxlength="10" /></td>
 </tr>
   <tr>
   <td><div align="right">
     <div class="letra">Total:</div>
   </div></td>
   <td><label>
     <input name="total" type="text" id="total" size="30" maxlength="10" />
   </label></td>
 </tr>
 <tr>
   <td colspan="2"><label>
     <div align="center">
       <input type="submit" name="envia" id="envia" value="Fechar Pedido" onclick="aviso()"/>
       <input type="reset" name="limpa" id="limpa" value="Limpar Dados" />
       </div>
   </label></td>
   </tr>
</table>
</form>

 

Obrigado =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire o <label>

Antes:


<tr>
   <td colspan="2"><label>
     <div align="center">
       <input type="submit" name="envia" id="envia" value="Fechar Pedido" onclick="aviso()"/>
       <input type="reset" name="limpa" id="limpa" value="Limpar Dados" />
       </div>
   </label></td>
   </tr>

 

Depois:


<tr>
   <td colspan="2">
     <div align="center">
       <input type="submit" name="envia" id="envia" value="Fechar Pedido" onclick="aviso()"/>
       <input type="reset" name="limpa" id="limpa" value="Limpar Dados" />
       </div>
   </td>
   </tr>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Funcionou!

 

Nossa, por causa de uma label?

 

Porque acontece isso? não sabia que label atrapalhava

 

Obrigado mesmo pela ajuda hein!

 

 

Márcio,

da uma olhada nesse artigo, para você entender a forma de uso correta.

 

Tag Label

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.