1

Situação: Tem o formulário e uma das opções que eu quero é que ele de um resultado da soma de variáveis automaticamente clicando num botão ou pode ser sem clicar, apenas o usuário só digitando os valores.

O problema é: ele já esta ativando o action para a pagina de processamento em php sem o usuário terminar de completar o formulário. Como poderia fazer para mostrar o resultado da soma em baixo do botão somar (o mesmo que está ativando o action)?

código no header:

<script type="text/javascript">  
    function calcula(){  
    var val1 = document.getElementById("pa").value;  
    var val2 = document.getElementById("di").value;
    var val3 = document.getElementById("insc").value;  
    var val4 = document.getElementById("outr").value;
    var soma = parseFloat(val1)+parseFloat(val2)+parseFloat(val3)+parseFloat(val4);  
    document.write("" + soma);  
}  
</script>

agora o código dentro do formulário html que chama a função acima:

<legend>Calcular total.</legend>    
<button id="calcular" onclick="calcula()">Calcular</button>

Aceito sugestões para se fazer de outra forma ou outra linguagem.

3
  • 2
    Nada nesse código está acionando o action, mas o document.write está sobrescrevendo o documento inteiro.
    – bfavaretto
    23/02/2014 às 23:33
  • O usuário coloca os números nas variáveis, gostaria de um botão ou mesmo que a soma desses campos fossem feitos e mostrados. o código ai faz parte dentro do formulário em HTML, eu poderia usar alert(soma); ele mostra o resultado (como eu quero) só que depois o formulário da o action para eu tratar as informações em outra pagina PHP, mas eu não quero isso. Quero apenas mostrar o resultado dessas variáveis somadas automaticamente dentro do próprio formulário que o usuário está preenchendo.
    – Vinicius
    23/02/2014 às 23:39
  • Uma coisa q tb pode ser feita é colocar a chamada da função calculo no onchange dos input dos valores, assim vc tem o valor da soma antes de pressionar o botão.
    – CCastro
    24/02/2014 às 0:31

2 Respostas 2

1

Por defeito, o <button></button> submete o formulário quando se carrega no botão.

Este comportamento pode ser alterado indicando type="button" (jsfiddle).

<button id="calcular_btn" type="button" onclick="calcular()">X</button>

Alternativamente, pode-se suprimir a submissão devolvendo o valor false no evento do botão (jsfiddle 1, jsfiddle 2).

<button id="calcular_btn" onclick="calcular(); return false;">X</button>

Existe ainda uma terceira forma de suprimir a submissão: através do preventDefault (jsfiddle DOM simples, jsfiddle jQuery).

$('#calcular_btn').click(function (e) {
    calcular();
    e.preventDefault();
});
1
  • Excelente! bastou um simples return false dentro do botão. Então removi o document.write e ao invés dele usei document.getElementById("soma").value = soma; ele retorna o resultado para um campo de texto HTML <input type="text" name="soma" id="soma"> que fica em baixo das outras variáveis como eu queria.
    – Vinicius
    24/02/2014 às 0:21
0

Se o que você precisa é cancelar o envio do formulário o ideal é adicionar o código abaixo ao seu

document.getElementById('id-do-form').onsubmit = function() {
    return false;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .