1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Atualização de campos em tempo real

Olá. Tenho um programa "bobo" extraido do livro "Use a Cabeça - JavaScript". Eu fiz uma pagina com um formulário em que o usuario preenche os dados com seu nome e a quantidade de Donuts. Em seguida a página calcula o valor do pedido com base no preço unitário de cada donut e uma taxa adicional. Até ai tudo bem, eu consegui fazer. O problema é que a página so preenche os campos com subtotal/taxa/total quando eu atualizo a pagina (F5), e não o faz imediatamente. Segue o código HTML e o código Javascript que faz os cálculos e deveria mostrar os valores atualizados na página.

<!DOCTYPE html>

<html>
    <head>

        <title> Duncan's Just-in-Time Donuts</title>
        <meta charset = "utf-8">
        <link rel="stylesheet" href="../css/principal.css">

    </head>


    <body>

        <h1> Duncan's Just-in-Time Donuts</h1>
        <p><em>All donuts 50 cents each, cake or glazed</em></p>
        <div class="formulario">
            <form name="orderform" action = "donuts.php" method = "POST">

                <ul>
                    <li>Name:                     <input type="text" id="name"             name = "name"        value =""     ></li>
                    <li># of cake donuts:        <input type="text" id="cakedonuts"         name="cakedonuts"    value =""     ></li>
                    <li># of glazed donuts:     <input type="text" id="glazeddonuts"     name="glazeddonuts"    value =""     ></li>
                    <li>Minutes 'till pickup:     <input type="text" id="minutes"         name="minutes"                     ></li>
                    <li>Subtotal:                 <input type="text" id="subtotal"         name="subtotal" value =""         ></li>
                    <li>Tax:                    <input type="text" id="tax"             name="tax"        value =""         ></li>
                    <li>Total:                    <input type="text" id="total"             name="total"     value =""         ></li>
                    <li><input type="button" value="place order" onclick="placeOrder(this.form);"></li>
                </ul>
            </form>
        </div>
        <script src="../js/scripts.js"></script>
    </body>
</html>
function updateOrder(){
    const TAXRATE = 0.1;
    const DONUTPRICE = 1;
    var numCakeDonuts = document.getElementById("cakedonuts").value*1;
    var numGlazedDonuts = document.getElementById("glazeddonuts").value*1;
    var subtotal = (parseFloat(numCakeDonuts)+parseFloat(numGlazedDonuts))*DONUTPRICE;
    var tax = subtotal*TAXRATE;
    var total = subtotal+tax;
    document.getElementById("subtotal").value = "$"+subtotal.toFixed(2);
    document.getElementById("tax").value = "$"+tax.toFixed(2);
    document.getElementById("total").value = "$"+total.toFixed(2);
}
// Era para atualizar sempre que o campo de cada input abaixo referenciado fosse mudado
// mas isso só acontece quando eu atualizo a página.
document.getElementById("subtotal").onchange = updateOrder();
document.getElementById("tax").onchange = updateOrder();
document.getElementById("total").onchange = updateOrder();
document.getElementById("name").onchange = updateOrder();
document.getElementById("minutes").onchange = updateOrder();
document.getElementById("cakedonuts").onchange = updateOrder();
document.getElementById("glazeddonuts").onchange = updateOrder();

// Verifica se o numero digitado é um número
function isNumber(element){
    if(document.getElementById(element).value == "" || isNaN(document.getElementById(element).value))
        return false;
    return true;

}
function placeOrder(form){

    if(document.getElementById("name").value =="")
        alert("Voce precisa fornecer um nome antes de enviar o pedido");

    else if(!isNumber("cakedonuts") || !isNumber("glazeddonuts") || !isNumber("minutes"))
        alert("Voce precisa preencher todos os campos corretamente.");
    else
        form.submit();
}

Se eu colocar no input o onchange = "updateOrder()" funciona, mas eu não queria fazer isso no html pq acho fica meio "deselegante".

Me desculpem se falei alguma bobagem mas eu sou iniciante ainda. Desde já agradeço.

  • Já descobri a solução, se eu remover os parenteses em upadeteOrder(), funciona.. mas porque?????

    Rafael Dourado D   04 de fev de 2015
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript html ou faça a sua própria pergunta.