mudar valor com JS [RESOLVIDO]

1. mudar valor com JS [RESOLVIDO]

removido
(usa Nenhuma)

Enviado em 19/07/2013 - 18:02h

pessoal:
tenho 2 campos:
quantidade1=digitado
valor1: digitado
total1: é calculado quando é chamado a função soma on onblur em valor

-----------------------

quantidade2=digitado
valor2: digitado
total2: é calculado quando é chamado a função soma on onblur em valor

como eu faço pra jogar o valor de total1+total2 em um input? onchange não funcionou

0 0

Quote

2. Re: mudar valor com JS [RESOLVIDO]

brian_ch
(usa Arch Linux)

Enviado em 19/07/2013 - 20:06h

Depois de calcular o total2, você pode usar o "document.getElementById" para obter o input em
que você quer colocar o resultado, e aí é só alterar o valor usando a propriedade "value"

Posso estar dizendo besteira pois estou falando "de cabeça", sem testar no código, mas acho que é isso mesmo.

O evento onchange, como o nome já diz, serve para executar uma ação quando, no caso do input, o conteúdo da caixa de texto fosse alterado, que acho que não é o que você quer nesse caso.

0 0

Quote

3. Re: mudar valor com JS [RESOLVIDO]

removido
(usa Nenhuma)

Enviado em 22/07/2013 - 10:46h

é mais ou menos isso mesmo, mas nem funfa.. da uma olhada

JS:



// função para multiplicar dois valores

function multi(){

        v1=document.getElementById("q").value;

        v2=document.getElementById("valor").value;

    if((v1!="") && (v2!="")){

        total.value=eval(v1)*eval(v2);

        servico.value=eval(v1)*eval(v2);

    }

}



// função para multiplicar dois valores

function multi2(){

        v1=document.getElementById("q2").value;

        v2=document.getElementById("valor2").value;

    if((v1!="") && (v2!="")){

        total2.value=eval(v1)*eval(v2);

        totalP.value=eval(v1)*eval(v2);

    }

}

// função para calcular o valor total de total1 + total2

function totalG(){

        v1=document.getElementById("servico").value;

        v2=document.getElementById("totalP").value;

    if((v1!="") && (v2!="")){

        totalg.value=eval(v1)+eval(v2);

    }

}

HTML



Quantidade: <input type="text" id="q" name="quant" style="width:80px" onblur="multi();">

                Valor Unit: <input type="text" id="valor" name="valor" style="width:80px" onblur="multi();">

                Total: <input type="text" id="total" name="total" style="width:80px" readonly="readonly"></td>  

        </tr>

        <tr bgcolor="whitesmoke"> 

        <td colspan="4">

                Produtos: <input type="text" id="produto" name="produto">

                Quantidade: <input type="text" id="q2" name="quant2" style="width:80px" onblur="multi2();">

                Valor Unit: <input type="text" id="valor2" name="valor2" style="width:80px" onblur="multi2();">

                Total: <input type="text" id="total2" name="total" style="width:80px" readonly="readonly" onblur="multi2();"></td>

Falta só o input 'totalg' pegar o valor de 'totalP' + 'servico'

0 0

Quote

4. Re: mudar valor com JS [RESOLVIDO]

brian_ch
(usa Arch Linux)

Enviado em 23/07/2013 - 02:13h

Hmmm, pra mim está bem confuso essa tabela, pra que serve o input produtos por exemplo? Não dá pra postar o código completo? Nesse trecho não aparece o input totalg por exemplo...

Outra coisa é que na função totalG você usa "getElementById("servico")" e "getElementById("totalP")" mas não há nada com esses id's (além de que, essa função totalG não está sendo chamada em lugar nenhum).

0 0

Quote

5. Re: mudar valor com JS [RESOLVIDO]

removido
(usa Nenhuma)

Enviado em 23/07/2013 - 15:14h

esqueci o resto, produtos seria o total do valor de produto, vo posta o forme completo é grandinho, mas da pra montar e testar ai...





<form id="os" name="os" method="post" action="../proc/adcOs.php" onsubmit="return valOS(this);">

  <table border="0" width="100%"><br />

     <tr bgcolor="whitesmoke">

         <td colspan="4"><b>OS Nº:</b> <?php $os = mysql_query("SELECT count(*) os FROM `ordem_servico`");

                                       $val = mysql_result($os,0,'os');

                                       /* se a quantidade de os cadastrada for diferente de 0 ele acrescentar +1

                                        para numero de os */

                                        if ($val != 0) {

                                            $numero = $val + 1;

                                            echo "<b><font color=red>". $numero . "</font></b>";

                                        } else {

                                            echo "<b><font color=red>". 1 ."</font></b>";

                                        }

?></td>

     </tr>

     <tr bgcolor="whitesmoke">

	<td colspan="4">Emitente: <select id="emitente" name="emitente"><option value=""></option>

						<?php

						   

						   $consultaEmit = mysql_query("SELECT * FROM emitente WHERE enable='Y' ORDER BY fantasia");



						   while($dados = mysql_fetch_array($consultaEmit)){

						   echo ("<option value='".$dados['idemitente']."'>".$dados['fantasia']."</option>");

						} 





						?></select>

	Cliente: <select id="cliente" name="cliente"><option value=""></option> 

						<?php

						   

						   $consultaCli = mysql_query("SELECT * FROM cliente WHERE enable='Y' ORDER BY fantasia");



						   while($dados = mysql_fetch_array($consultaCli)){

						   echo ("<option value='".$dados['idcliente']."'>".$dados['fantasia']."</option>");

						} 



						?></select> <a href="popcliente.php?id=<?php $dados['idcliente']; ?>" target="_blank" onClick="window.open(this.href, this.target, 'width=408, height=430, scrollbars=yes'); return false;"><i class="icon-search"></i></a> &nbsp; 

        Atendente: <select id="atendente" name="atendente"><option value=""></option>

						<?php

						   

						   $consultaAt = mysql_query("SELECT * FROM funcionario WHERE enable='Y' ORDER BY nome");



						   while($dados = mysql_fetch_array($consultaAt)){

						   echo ("<option value='".$dados['idfuncionario']."'>".$dados['nome']."</option>");

						} 



						?></select>

        Abertura: <?php echo date("d/m/Y"); ?> <input type="hidden" name="dataabertura" value="<?php echo date("d/m/Y"); ?>"></td>

     </tr>  

     <tr bgcolor="whitesmoke">

        <td colspan="4">Tipo OS: <select id="tipoos" name="tipoos"><option value=""></option>

							<?php

							   

							   $consultaOS = mysql_query("SELECT * FROM tipo_os WHERE enable='Y' ORDER BY nome");



							   while($dados = mysql_fetch_array($consultaOS)){

							   echo ("<option value='".$dados['idtipo_os']."'>".$dados['nome']."</option>");

							} 





							?></select>

        

	Tipo Equipamento: <select id="tipoequipa" name="tipoequipa"><option value=""></option>

					<?php

					   

					   $consultaEq = mysql_query("SELECT * FROM tipo_equipamento WHERE enable='Y' ORDER BY nome");



					   while($dados = mysql_fetch_array($consultaEq)){

					   echo ("<option value='".$dados['idtipo_equipamento']."'>".$dados['nome']."</option>");

					} 





					?></select>

        Cor: <input type="text" id="cor" name="cor" style="width:110px">

        Marca: <input type="text" id="marca" name="marca" style="width:150px"></td>

      </tr>

      <tr bgcolor="whitesmoke">

          <td colspan="4">Característica: <input type="text" id="carac" name="carac" style="width:526px"></td>

      </tr>

      <tr bgcolor="whitesmoke">

          <td colspan="4"><hr>Técnico: <select id="tecnico" name="tecnico"><option value=""></option>

						<?php

						   

						   $consultaTec = mysql_query("SELECT f.idfuncionario,f.nome AS funcionario, d.nome AS departamento

                                                                                FROM funcionario f

                                                                                INNER JOIN departamento d ON iddepartamento = departamento_iddepartamento

                                                                                WHERE enable =  'Y'

                                                                                AND d.nome =  'Técnico'

                                                                                ORDER BY f.nome");



						   while($dados = mysql_fetch_array($consultaTec)){

						   echo ("<option value='".$dados['idfuncionario']."'>".$dados['funcionario']."</option>");

						} 



						?></select>

                Data Encerramento: <input type="text" id="calendario" name="dencerramentoos" style="width:80px">

                Hora Encerramento: <input type="text" is="hencerramentoos" name="hencerramentoos" style="width:80px" </td>

      </tr>

      <tr bgcolor="whitesmoke">

	<td colspan="4">Serviço: <input type="text" id="tiposervico" name="tiposervico" readonly="readonly">

                <a href="popservico.php" target="_blank" onClick="window.open(this.href, this.target, 'width=408, height=430, scrollbars=yes'); return false;"><i class=" icon-plus"></i></a> &nbsp;   

                Quantidade: <input type="text" id="q" name="q" style="width:80px" onblur="multi();">

                Valor Unit: <input type="text" id="valor" name="valor" style="width:80px" onblur="multi();">

                Total: <input type="text" id="total" name="total" style="width:80px" readonly="readonly"></td>  

        </tr>

        <tr bgcolor="whitesmoke"> 

        <td colspan="4">

                Produtos <input type="text" id="produto" name="produto" readonly="readonly"> <a href="popproduto.php" target="_blank" onClick="window.open(this.href, this.target, 'width=850, height=430, scrollbars=yes'); return false;"><i class=" icon-plus" ></i></a> &nbsp; 

                Quantidade: <input type="text" id="q2" name="q2" style="width:80px" onblur="multi2();">

                Valor Unit: <input type="text" id="valor2" name="valor2" style="width:80px" onblur="multi2();">

                Total: <input type="text" id="total2" name="total2" style="width:80px" readonly="readonly" onblur="multi2();"></td>

        <tr bgcolor="whitesmoke">

            <td>

                </td>

    </tr>

	<!-- Daqui pra baixo seria o total de produtos, serviços e o total geral que seria produtos + serviços

        -->

     <tr bgcolor="whitesmoke">         

	<td colspan="4"><hr>Produtos: <input type="text" id="totalP" name="totalP" style="width:80px" readonly="readonly" onchange="totalG();">

                Serviços: <input type="text" id="servico" name="servico" style="width:80px" readonly="readonly" onchange="totalG();">

                Desconto: <input type="text" id="desconto" name="desconto" style="width:80px" readonly="readonly">  

                Total Geral: <input type="text" id="totalg" name="totalg" style="width:80px" readonly="readonly">  

     </tr>

     <tr bgcolor="whitesmoke">

        <td colspan="4">Condição de Pagamento: <select id="condicao" name="condicao"><option value=""></option>

							<?php

							   

							   $consultaCond = mysql_query("SELECT * FROM condicao_pagamento WHERE enable='Y' ORDER BY nome");



							   while($dados = mysql_fetch_array($consultaCond)){

							   echo ("<option value='".$dados['idcondicao_pagamento']."'>".$dados['nome']."</option>");

							} 





							?></select>

            

	Portador: <select id="portador" name="portador"><option value=""></option>

					<?php

					   

					   $consultaPor = mysql_query("SELECT * FROM portador WHERE enable='Y' ORDER BY nome");



					   while($dados = mysql_fetch_array($consultaPor)){

					   echo ("<option value='".$dados['idportador']."'>".$dados['nome']."</option>");

					} 



					?></select>

	Data Entrega: <input type="text" id="calendario2" name="dentrega" style="width:80px">

        Hora Entrega: <input type="text" id="hentrega" name="hentrega" style="width:80px"></td>

     </tr>  

     <tr bgcolor="whitesmoke">

         <td colspan="3"><hr><p>Laldo: </label></p><textarea rows="4" cols="50" name="lado" style="margin-left: 0px; margin-right: 0px; width: 987px;"></textarea></td>

     </tr>

     <tr>

        <td><input type="submit" name="enviar" value="Salvar" class="btn btn-primary"> 

        <input type="reset" name="apagar" value="Apagar" class="btn btn-primary"></td>   

     </tr>

  </table>

</form>



// função para multiplicar dois valores

function multi(){

        v1=document.getElementById("q").value;

        v2=document.getElementById("valor").value;

    if((v1!="") && (v2!="")){

        total.value=eval(v1)*eval(v2);

        servico.value=eval(v1)*eval(v2);

    }

}



// função para multiplicar dois valores

function multi2(){

        v1=document.getElementById("q2").value;

        v2=document.getElementById("valor2").value;

    if((v1!="") && (v2!="")){

        total2.value=eval(v1)*eval(v2);

        totalP.value=eval(v1)*eval(v2);

    }

}

// função para calcular o valor total de total1 + total2

function totalG(){

        v1=document.getElementById("servico").value;

        v2=document.getElementById("totalP").value;

    if((v1!="") && (v2!="")){

        totalg.value=eval(v1)+eval(v2);

    }

}

0 0

Quote

6. Re: mudar valor com JS [RESOLVIDO]

brian_ch
(usa Arch Linux)

Enviado em 24/07/2013 - 19:57h

Você podia colocar :



if ((total2.value!="") && (totalP.value!="")) {

  totalG();

}

no fim de multi e multi2. Dê uma olhada e veja se é isso que você queria

Pra falar a verdade eu nem sabia que você podia usar o "id" diretamente sem usar o getElementById, mas pelo que eu vi em uma pesquisa rápida no stackoverflow, parece que isso não é uma boa prática, segue um dos links:

http://stackoverflow.com/questions/7826737/directly-reference-html-elements

Acho que deve ter algum jeito mais elegante de fazer essas funções, mas de qualquer modo, assim funciona também.

0 0

Quote

7. Re: mudar valor com JS [RESOLVIDO]

leonardo0112
(usa Linux Mint)

Enviado em 25/07/2013 - 02:57h

Eu vou fazer em jQuery, pq JS puro não sou mto bom, ainda mais que o jQuery possui seletores CSS, então a navegação pelo DOM (diga-se elementos da página) fica muito fácil, antes de mais nada sugiro e muito usar jQuery.



<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8" />

   <title>Soma</title>

   <style type="text/css">

   #page {

      width: 50%;

      margin: 50px auto;

      background-color: #f1f1f1;

      padding: 20px;

   }

   #labels {

      width: 200px;

      margin: 0 auto;

   }

   input {

      display: block;

      margin-bottom: 10px;

   }

   </style>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

   <script type="text/javascript">

      $(document).ready(function(){

         $("#q1, #v1").focusout(function(){

            var q = $("#q1").val();

            var v = $("#v1").val();

            if( (q != '') && (v != '') ) {

               $("#t1").val( q * v );

            }else{

               $("#t1").val( '' );

            }

          });

          $("#q2, #v2").focusout(function(){

            var q = $("#q2").val();

            var v = $("#v2").val();

            if( (q != '') && (v != '') ) {

               $("#t2").val( q * v );

            }else{

               $("#t2").val( '' );

            }

          });

          $("#q1, #v1, #q2, #v2").focusout(function(){

             var t1 = $("#t1").val();

             var t2 = $("#t2").val();

             if( (t1 != '') && (t2 !='') ) {

                $("#tg").val( parseInt(t1) + parseInt(t2) );

             }else{

                $("#tg").val( '' );

             }

          });

          $("#limpar").click(function(){

             $("input[type=text]").val( '' );

          });

      });

   </script>

</head>

<body>

<div id="page">

   <div id="labels">

      <label>Quantidade 1 &darr;

      <input type="text" id="q1" /></label>

      <label>Valor 1 &darr;

      <input type="text" id="v1" /></label>

      <label>Total 1 &darr;

      <input type="text" id="t1" readonly="readonly" /></label>

      <hr />

      <label>Quantidade 2 &darr;

      <input type="text" id="q2" /></label>

      <label>Valor 2 &darr;

      <input type="text" id="v2" /></label>

      <label>Total 2 &darr;

      <input type="text" id="t2" readonly="readonly" /></label>

      <hr />

      <label>Total Geral &darr;

      <input type="text" id="tg" readonly="readonly" /></label>

      <input type="button" id="limpar" value="Limpar Campos" />

   </div>

</div>

</body>

</html>