[Resolvido] Botão Limpar Campos
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 =)
Discussão (4)
Carregando comentários...