Calcular Campos em JavaScript (sem refresh)

Zoação · Julho 12, 2013

Preciso realizar cálculo em campos sem realizar REFRESH na página. É possível?

Como faço isto?

Micilini Roll · Julho 12, 2013

sim é possivel! no caso voce devera assim que o botao for clicado fazer com que o jquery pegue o valor do campo e automaticamente jogue pro php! observe:

voce clica no botao e o jquery envia pro php sem voce sair da sua pagina atual!!

eu sempre ultilizo este comando abaixo:

$.ajax({
	type: "POST",
	url: "email.php",
	data: "valor do input pego pelo jquery",
	success: function(data){
///
	}
});

ele faz tudo que eu disse acima! em caso de duvidas na implementacao deste codigo retorne aqui! abracos

cristianoolv · Julho 12, 2013

<html>

<head>

<title>teste</title>

window.onload = function(){

var i = function(id){ return document.getElementById(id); }

i("calcula").onclick = function(){

var c1 = i("campo1").value;

var c2 = i("campo2").value;

i("resultado").innerHTML = parseInt(c1) + parseInt(c2);

}

</script>

</head>

<body>

<button id="calcula">calcular</button>

</fieldset>

<br>

Result: <span id="resultado">0</span>

</fieldset>

</body>

</html>

Mateus VenÃ¢ncio · Julho 12, 2013

aproveitando a deixa do nosso amigo, estou com um problema semelhante, porem minhas somas são dinâmicas, por exemplo, tenho dois itens com um valor x e o usuário seleciona uma quantidade x
eu até estou conseguindo fazer o calculo individual, mas o que eu não consigo é somar todos os valores totais!

alguém pode me ajudar?

cristianoolv · Julho 12, 2013

Vê se ajuda:

 <script type="text/javascript">
      
      var valor        = 13, 
          valorQueMuda = 0, 
          total        = 0, 
          totalDeTudo  = 0;

      for(var x = 0; x < 5; x++){

        total = valor + (x * 2.4);
        
        console.log("total: "+ total);

        totalDeTudo += total;

      }

        console.log("\nTotal de tudo: " + totalDeTudo);

    </script>

Mateus VenÃ¢ncio · Julho 12, 2013

Obrigado pela ajuda cara, mas não me serviu não, vou tentar explicar melhor!

aquela função que você postou acima é exatamente o que eu estou fazendo, porem ela me serve individualmente para cada item que eu tenho!

ex:

Acomodação 1 --- Valor R$ 100,00 -- Quantidade Selecionada 3

executa a função assim que eu clico no select das quantidades1

me retorna R$ 300,00

Acomodação 2 --- Valor R$ 150,00 -- Quantidade Selecionada 3

executa a função assim que eu clico no select das quantidades2

me retorna R$ 450,00

ai eu empaquei em somar os resultados finais R$ 300,00 + R$ 450,00 para mostrar na tela quanto o usuário vai gastar!

acho que assim eu expliquei melhor :)

Micilini Roll · Julho 12, 2013

olha zoaçao nao sei se eu entendi direito maaas! no caso este topico que voce criou é referente ao topico:

http://forum.imasters.com.br/topic/503321-qual-a-melhor-forma/#entry1991206

isso diz que no caso voce nao deseja fazer o famoso calculo via javascript e sim enviar para o php e ele fazer por la mesmo certo! entao se for isso continuo reforcando a ideia de:

$.ajax({
	type: "POST",
	url: "email.php",
	data: "valor do input pego pelo jquery",
	success: function(data){
///
	}
});

novamente digo a mesma coisa: em caso de duvida na implementacao dos codigos retorne a este topico!

cristianoolv · Julho 12, 2013

posta o codigo que voce ja fez, fica mais facil entender...

Zoação · Julho 13, 2013

Caro Micili,

Na verdade, o resultado não precisa ser enviado para o "banco de dados" não. O que preciso é apenas que realize o cálculo.

:D

<html>
  <head>
    <title>teste</title>
    <script type="text/javascript">
  window.onload = function(){
 
    var i = function(id){ return document.getElementById(id); }
     
    i("calcula").onclick = function(){
      var c1 = i("campo1").value;
      var c2 = i("campo2").value;
     i("resultado").innerHTML = parseInt(c1) + parseInt(c2);
    }
  }
    </script>
  </head>
<body>
  <fieldset id="c">
    <h3>Soma:</h3>
      <input type="text" id="campo1"></br>
      <input type="text" id="campo2"></br>
      <button id="calcula">calcular</button>
  </fieldset>
  <br>
  <fieldset>
    Result: <span id="resultado">0</span>
  </fieldset>
  </body>
</html>

Veja só, vou tentar adaptar aqui em meu formulário.

Agora, este script realiza SOMA.

Preciso também multiplicar ...

Melhor, vou mostrar aqui o que preciso fazer, ok!

Obrigado

Micilini Roll · Julho 13, 2013

aqui esta o seguinte

i("resultado").innerHTML = parseInt(c1) + parseInt(c2);

voce observou que tem um

parseInt(c1) + parseInt(c2)

no caso da multiplicacao voce somente ira alterar o + para o *,caso desejar diminuir use o - e dividir use o /

abraços

Zoação · Julho 14, 2013

Muito obrigado Micilini.

Pessoal, estou tendo alguma outro problema que seria:

- Ao tentar calcular um valor com casas decimais, simplesmente o script ignora, vejam um exemplo:

Como deveria acontecer:

2,98 * 2 = 5,96

Como realmente ocorre:

2,98 * 2 = 4

Ou seja, o script esta ignorando vírgulas.

Obs.: tentei utilizar os valores do campo de duas formas, vejam:

2.98 (utilizando ponto)

2,98 (utilizando vírgula)

E em nenhum dos casos funcionou.

Obrigado!

cristianoolv · Julho 14, 2013

ué, aki deu certo:

	var a = 2.98,
	    b = 2;

	console.log(a*b);

Zoação · Julho 14, 2013

Cristiano,

Coloque em:

campo1 = "2.90"

campo2 = "2"

e veja o que acontece ... não retorna o valor correto que é: R$ 5 e sim R$ 4 que é errado

<html>
  <head>
    <title>teste</title>
    <script type="text/javascript">
  window.onload = function(){
 
    var i = function(id){ return document.getElementById(id); }
     
    i("calcula").onclick = function(){
      var c1 = i("campo1").value;
      var c2 = i("campo2").value;
     i("resultado").innerHTML = parseInt(c1) + parseInt(c2);
    }
  }
    </script>
  </head>
<body>
  <fieldset id="c">
    <h3>Soma:</h3>
      <input type="text" id="campo1"></br>
      <input type="text" id="campo2"></br>
      <button id="calcula">calcular</button>
  </fieldset>
  <br>
  <fieldset>
    Result: <span id="resultado">0</span>
  </fieldset>
  </body>
</html>

cristianoolv · Julho 15, 2013

usa parseFloat no lugar de parseInt

Zoação · Julho 15, 2013

Cristiano,

Agora calcula perfeitamente.

Aproveitando sua ajuda, gostaria de saber se há como fazer o seguinte, veja:

2.25 * 2 = 4.5

ficar assim:

2.25 * 2 = 4.50

Só isto que falta para ficar "perfeito".

E obrigado desde já pela sua ajuda

:D

angelorubin · Julho 15, 2013

Bom dia,

Utiliza toFixed(2).

Tenta assim:

var result = parseFloat(c1) + parseFloat(c2);
i("resultado").innerHTML = result.toFixed(2);

Zoação · Julho 15, 2013

Perfeito.

Muito obrigado Angelo.

Agora esta da forma que preciso.

:D

Arquivado

Calcular Campos em JavaScript (sem refresh)

Recommended Posts

Zoação 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Micilini Roll 49

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus VenÃ¢ncio 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus VenÃ¢ncio 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Micilini Roll 49

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zoação 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Micilini Roll 49

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zoação 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zoação 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zoação 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zoação 2

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

Fóruns

Tempo Real

Informação importante