mudar valor com JS [RESOLVIDO]

1. mudar valor com JS [RESOLVIDO]

Perfil removido
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


  


2. Re: mudar valor com JS [RESOLVIDO]

Brian Chalega da Silva
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.


3. Re: mudar valor com JS [RESOLVIDO]

Perfil removido
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'


4. Re: mudar valor com JS [RESOLVIDO]

Brian Chalega da Silva
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).




5. Re: mudar valor com JS [RESOLVIDO]

Perfil removido
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);
}
}




6. Re: mudar valor com JS [RESOLVIDO]

Brian Chalega da Silva
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.


7. Re: mudar valor com JS [RESOLVIDO]

Leonardo
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>




8. Re: mudar valor com JS [RESOLVIDO]

Perfil removido
removido

(usa Nenhuma)

Enviado em 25/07/2013 - 22:05h

jquery é pratico não?
Valeu cara!
Show!






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts