Somar Inputs com Java Script

[aramis melo nascimento]

Pessoal fiz esse função em java script para somar dos input do meu formulário e fazer a seguinte condição

se o peso 1 + peso 2 (campos do formulário for diferente de 100) der um alert e mostre a msg para o usuário)


function SomarEtapa1(){

var soma = eval(form1.p1.value) + eval(form1.p2.value);
if (soma !=100){
alert(" Valor invalido!a soma dos peso deve ser igual a 100!");
return false;
}
}


</script




estou chamando assim

<input name="p1" id ="peso1" type="text" value="<?=$p1?>" size="1" maxlength="2"onKeyUp="SomarEtapa1();">


<input name="p2" id ="peso2" type="text" value="<?=$p2?>" size="1" maxlength="2"onKeyUp="SomarEtapa1();">

mas quando eu digito qualquer valor ja aparece a msg. onde deveria a aparecer só depois que eu digita-se os dois valores e a soma fosse diferente de 100

alguma luz ??


desde já agradeço muito a colaboração

Att,


Aramis Melo
















--
Aramis Melo
Graduando em Ciência da Computação
arami...@gmail.com
aramisna...@yahoo.com.br
arami...@hotmail.com
Tel: (83) 8821-8260 /99241591
Msn: arami...@hotmail.com
Desenvolvedor FCM-PB

[Arthur Gouveia]

Boa tarde, Aramis.

O evento onKeyUp vai se ativado sempre que uma tecla for pressionada e depois solta dentro do campo que você especificou.

Sugiro que você use o "onBlur" no segundo input, porque esse evento é ativado quando você sái do foco desse campo. Assim, o usuário preencheria o primeiro campo, depois o segundo e ao sair desse segundo campo, a função seria chamada.

Tenta isso aí e manda um feedback.

Abraço!

--
Arthur Gouveia.
Bacharelando em Ciências da Computação - Unipê
http://arthurgouveia.com

"De nihilo nihilum."

[Sthenley Macedo]

Ois!

Se usar o OnBlur no segundo campo, como o colega sugeriu: ao atualizar o valor do primeiro campo posteriormente, precisaria colocar o foco no segundo, creio eu, para atualizar tudo. Você não pode prever como o seu usuário vai se comportar.

Se não quiser depender dos eventos nos dois campos, crie um botão para chamar sua função e nele use o OnClick. Pode ainda usar a dica do colega e neste botão que sugerir colocar o label "recalcular". Se quiser bem chique mesmo, coloque o label "calcular" e faça com que seja alterado pelo OnBlur dos campos para "recalcular" (se o valor anterior nos campos for diferente de null).


() 'z

[aramis melo nascimento]

Valeu galera obrigado !!!

2009/3/10 Sthenley Macedo <sthe...@gmail.com>

[Bernardo Barreto]

Galera, vou me meter no meio dessa conversa... Eu sou iniciante em php, javascrit, jquery etc.
Ei fiz isso aqui na minha máquina e coloquei pra rodar, mas não dá nenhum alert aqui no meu pc, pq?

valeu

2009/3/10 aramis melo nascimento <arami...@gmail.com>

[Arthur Gouveia]

Poste seu código que fica mais fácil :)

[Sthenley Macedo]

Salve!

Galera, vou me meter no meio dessa conversa... Eu sou iniciante em php, javascrit, jquery etc.
Ei fiz isso aqui na minha máquina e coloquei pra rodar, mas não dá nenhum alert aqui no meu pc, pq?

Mande pra nós o conteúdo da página ou a URL, se estiver na Internet. Só dá pra saber analisando o que você digitou.

[Bernardo Barreto]

Fiz com o código do nosso amigo Aramis!


<script>

function SomarEtapa1(){

var soma = eval(form1.p1.value) + eval(form1.p2.value);
if (soma !=100){
    alert(" Valor invalido!a soma dos peso deve ser igual a 100!");
        return false;
    }
}
</script

<input name="p1" id="peso1" type="text" value="<?=$p1?>" size="1" maxlength="2" onKeyUp="SomarEtapa1();">

<input name="p2" id="peso2" type="text" value="<?=$p2?>" size="1" maxlength="2" onBlur="SomarEtapa1();">

2009/3/10 Sthenley Macedo <sthe...@gmail.com>

[Bernardo Barreto]

Já corrigi essa tag que estava faltando no fechamento do script e salvei, mas não diantou!

2009/3/10 Bernardo Barreto <ber...@gmail.com>

[Arthur Gouveia]

1º - Feche a tag </script>
2º - Descreva seu script assim: <script type="text/javascript">
3º - form1.p1.value retorna algo? Você não deveria usar document.getElementById('peso1').value não? O mesmo seria utilizado para o 'peso2'. Atribua isso a variáveis e efetue sua verificação no if com essas variáveis.

Tenta isso aí :)

[Arthur Gouveia]

<script type="text/javascript">

var pesoVar1 = document.getElementById('peso1').value;
var pesoVar2 = document.getElementById('peso2').value;

if( (pesoVar1 + pesoVar2) != 100){

alert(" Valor invalido!a soma dos peso deve ser igual a 100!");
return false;

}

</script>

Tenta isso aí...

[Sthenley Macedo]

Ois!

1º - Feche a tag </script>
2º - Descreva seu script assim: <script type="text/javascript">
3º - form1.p1.value retorna algo? Você não deveria usar document.getElementById('peso1').value não? O mesmo seria utilizado para o 'peso2'. Atribua isso a variáveis e efetue sua verificação no if com essas variáveis.

Justo...

Além disso, possivelmente é o browser, já que falta um monte de outros códigos para um página dentro dos padrões. Se estiver no Windows, alterne entre IE/FF e faça o resto da página :)

()'z

[Bernardo Barreto]

Ok, vou tentar aqui, jaja eu retono!!
E eu só uso o FF, muito mais rápido e melhor!

Valeu Galera.

2009/3/10 Sthenley Macedo <sthe...@gmail.com>

[Sthenley Macedo]

Além disso, possivelmente é o browser, já que falta um monte de outros códigos para um página dentro dos padrões. Se estiver no Windows, alterne entre IE/FF e faça o resto da página :)

Em tempo: se fizer diferença mudar de browser, lembre-se que bom mesmo é funcionar em todos :) Aqui vale a dica em função da sua experimentação, já que não é algo para produção mesmo.

[Arthur Gouveia]

Oops!

Lembra de colocar o código que tá dentro de <script></script> dentro de um

function algumacoisa() {

vai-aqui-o-codigo

}


Aí no teu HTML você chama a função como bem entender (onblur, onclick, etc).

[Bernardo Barreto]

Claro claro, o correto é funcionar em qualquer browser!

Consegui não, acho que estou errando besteira!!!
Acho qu to colocando esse código     document.getElementById('peso1').value     no lugar errado!!!

function SomarEtapa1(){

var soma = document.getElementById('peso1').value + document.getElementById('peso2').value;
if (soma !=100){
alert(" Valor invalido. A soma dos pesos devem ser iguais a 100!");
return true;
}
}

</script>

<input name="peso1" id="peso1" type="text" value="<?=$peso1?>" size="1" maxlength="2"onKeyUp="SomarEtapa1();">

<input name="peso2" id="peso2" type="text" value="<?=$peso2?>" size="1" maxlength="2"onKeyUp="SomarEtapa1();">

2009/3/10 Sthenley Macedo <sthe...@gmail.com>

[Arthur Gouveia]

Teu "onKeyUp" tá colado com "maxlength='2'".

Você quer que quando o cara solte a tecla do teclado ele já chame a função?
Joga a verificação disso num botão.

Toma, ta funcionando:

<html>
<head>
<script type="text/javascript">
    function a(){

        var pesoVar1 = document.getElementById('peso1').value;
        var pesoVar2 = document.getElementById('peso2').value;

        if( (pesoVar1 + pesoVar2) != 100){

            alert(" Valor invalido!a soma dos peso deve ser igual a 100!");
            return false;
        }
    }
</script>

</head>
<body>

<input name="peso1" id="peso1" type="text" value="" size="1" maxlength="2" />

<input name="peso2" id="peso2" type="text" value="" size="1" maxlength="2" />

<input type="button" onclick="a();"/>

</body>
</html>

[Bernardo Barreto]

Ah, saquei saquei!!!! Muito bom!!
Obrigado pessoal, valeu!!!

2009/3/10 Arthur Gouveia <arthur....@gmail.com>

[Diego Pessoa]

Bernardo, uma dica pra você, use Jquery, é mais simples e mais organizado, eu realmente não vou com a cara desses "onclick"s da vida na aplicação, veja como fica seu exemplo em jquery:

<script type="text/javascript">
$().ready(function(){
$(".botao").click(function () {
      var peso1 = parseInt($("#peso1").val());
      var peso2 = parseInt($("#peso2").val());
      var soma = peso1 + peso2;
      if(soma != 100) {

         alert("Valor invalido!a soma dos peso deve ser igual a 100!");
      }

 });
});
</script>

<input name="peso1" id="peso1" type="text" value="" size="1" maxlength="2" />
<input name="peso2" id="peso2" type="text" value="" size="1" maxlength="2" />

<input type="button" class="botao" />

Bem mais simples.

Recomendo que você dê uma olhada em: http://jquerybrasil.com/ lá tem vários links que podem te ajudar, nos tempos de hoje programar Javascript puro é puro martírio! hehe.

Att.
Diego Pessoa

2009/3/10 Bernardo Barreto <ber...@gmail.com>

[Sthenley Macedo]

Agora em casa... :)

Bernardo, uma dica pra você, use Jquery, é mais simples e mais organizado, eu realmente não vou com a cara desses "onclick"s da vida na aplicação, veja como fica seu exemplo em jquery:

<script type="text/javascript">
$().ready(function(){
$(".botao").click(function () {
      var peso1 = parseInt($("#peso1").val());
      var peso2 = parseInt($("#peso2").val());
      var soma = peso1 + peso2;
      if(soma != 100) {

         alert("Valor invalido!a soma dos peso deve ser igual a 100!");
      }

 });
});
</script>

<input name="peso1" id="peso1" type="text" value="" size="1" maxlength="2" />
<input name="peso2" id="peso2" type="text" value="" size="1" maxlength="2" />

<input type="button" class="botao" />

Bem mais simples.

Olha só... No final das contas, é praticamente a mesma quantidade de código. Em verdade, o código do Arthur consumiu 9 linhas, enquanto o JQuery levou 10, fora a própria biblioteca, o que deixa tudo mais "pesado". Para coisa tão pequena, não há necessidade de pendurar outras apenas para escrever diferente. Ainda que 3 linhas resolvessem, haveria o peso da própria biblioteca.

Num sistema onde essas necessidades sejam recorrentes, com certeza é válido, pois questões como facilidade e rapidez na implementação aumentam a produtividade. Organização do código também é muito importante para manutenção.

Como desde sempre temos aqui um experimento, foi muito interessante surgirem duas alternativas. Na hora de implementar, cabe o discernimento sobre que técnica, digamos assim, trará melhores resultados.

Abratzo!
 

[Bernardo Barreto]

Cara, muito bom! Gostei mesmo, valeu!!
Coloquei pra rodar aqui em casa e ficou legal, antes estava no trampo!! :P
Surgindo dúvidas eu corro pra vocês.

Abraçoo

2009/3/10 Sthenley Macedo <sthe...@gmail.com>

[Diego Pessoa]

Olá Sthanley, acho sua observação válida, pro cara que vai fazer uma coisa simples só como uma soma, pode usar javascript normal, mas, normalmente, a gente utiliza javascript para várias outras coisas, e a biblioteca Jquery expande nossos horizontes, por isso, dei a dica usando o exemplo dele, para que ele entendesse facilmente.

Att.
Diego Pessoa

2009/3/10 Sthenley Macedo <sthe...@gmail.com>