[Resolvido] Javascript muito simples pra quem sabe

Londim · Julho 8, 2010

Por exemplo estou preenchendo um formulario de pagamentos...

tenho 3 fields

VAlor

Desconto (%)

Total

Gostaria que o field TOTAL eu nao conseguisse altera-lo

ele seria alimentado pelo valor e desconto

tipo se eu alimentar o valor ele preenche o campo total pq no desconto vai ser 0%

agora se eu preencher o desconto ele faz o calculo.... do valor - o desconto e preenche o total

Thiago Retondar · Julho 8, 2010

Para ninguém modificar o último campo, é só você definir os atributos disabled ou readonly.

Agora para aplicar o desconto é só matemática. Tendo a matemática, é só dar uma pesquisa para fazer as alterações no último campo.

:thumbsup:

gRoOvE · Julho 9, 2010

disabled e readonly funcionam da mesma forma? São idênticos?

Como enviar um valor vindo da função javascript para uma input?

Londim · Julho 9, 2010

com certeza a parte da matematica é a de menos.... eu procurei mas nao saco nada de java script... um cara q tenha uma leve nocao resolve isso em minutos...

por isso existe o forum

gRoOvE · Julho 9, 2010

Cara, consegui fazer isso aqui:

<html>
	<head>
		<script type="text/javascript">
			function calcular() {
				var valor = document.getElementById("valor").value;
				var desconto = document.getElementById("desconto").value;
				var total = valor - (valor * (desconto / 100));
				document.getElementById("total").value = total;
			}
		</script>
	</head>
	<body>
		<fieldset>
			<form>
				Valor: <input type="text" id="valor"><br />
				Desconto(%): <input type="text" id="desconto"><br />
				Total: <input type="text" id="total" disabled><br />
				<input type="button" value="calcula" onclick="calcular()">
			</form>
		</fieldset>
	</body>
</html>

Agora, como fazer pra ele ir pulando os inputs automaticamente não sei, sei que tem que fazer algo pra ele pular os elementos DOM, hehe

Acho que seria isso, mudei apenas o formulário.

<fieldset>
	<form>
		Valor: <input type="text" id="valor" onblur="calcular()"><br />
		Desconto(%): <input type="text" id="desconto" value="0" onblur="calcular()"><br />
		Total: <input type="text" id="total" disabled><br />
	</form>
</fieldset>

William Bruno · Julho 9, 2010

disabled e readonly funcionam da mesma forma? São idênticos?

não.

a diferença é que readonly == somente leitura

não deixa o usuario editar o valor

disable seria algo como 'desativado', além de impedir a edição, também não é enviado no onsubmit() do form.

se você tentar receber o $_POST de um campo que estiver com o disabled, você não vai receber nada.

Londim · Julho 9, 2010

oq eu qru é mais ou menos isso...mas qru q ele calcule enqunto a pessoa digita os valores nos campos valor e/ou desconto

nao qru ter q apertar botao

William Bruno · Julho 9, 2010

pode usar o evento onkeyup

Londim · Julho 9, 2010

agora q vi o onblur

mas tipo ele realmente ta mudando mas o resultado no field TOTAL aparece so "NAN"

Thiago Retondar · Julho 9, 2010

Mostre o código que está utilizando.

Provavelmente é por que você está fazendo operações matemáticas com string. Utilize a função parseFloat() (há também a função parseInt(), mas no seu caso não é aconselhável usar, já que está fazendo uso de operações que envolve números decimais).

:thumbsup:

gRoOvE · Julho 10, 2010

disabled e readonly funcionam da mesma forma? São idênticos?

não.

a diferença é que readonly == somente leitura

não deixa o usuario editar o valor

disable seria algo como 'desativado', além de impedir a edição, também não é enviado no onsubmit() do form.

se você tentar receber o $_POST de um campo que estiver com o disabled, você não vai receber nada.

Entendi, basicamente a diferença seria o envio dos dados na input?

agora q vi o onblur

mas tipo ele realmente ta mudando mas o resultado no field TOTAL aparece so "NAN"

Testei aqui e está funcionando, como o Thiago falou, deve estar usando outro tipo de variável não int

Londim · Julho 10, 2010

Codigo do form

<table width="100%" border="1" cellspacing="1" cellpadding="0" bordercolor="#000066" bgcolor="#280028">
        <tr>
          <th colspan="4" bgcolor="#000066" class="Titulo" scope="col">Cadastro de PAGAMENTO<a name="pagamento" id="plano4"></a>
            <input name="url3" type="hidden" id="url3" value="<? print $url; ?>" /></th>
          <th bgcolor="#000066" class="Titulo" scope="col" width="16%"><label>
            <input name="button4" type="submit" class="field" id="button5" value="Cadastrar Pagamento" />
          </label></th>
          <th bgcolor="#000066" class="Titulo" scope="col" width="22%"><label>
            <input name="button4" type="submit" class="field" id="button6" value="Limpar Formilário" />
          </label></th>
        </tr>
        <tr>
          <th width="11%" scope="row">Natureza:</th>
          <td scope="row"><select name="tipo" class="field" id="plano5">
            <option value="" selected="selected"></option>
            <option value="contratos">Contratos</option>
            <option value="servicos">Serviços</option>
            
          </select></td>
          <td width="6%" scope="row">Duração:</td>
          <td width="33%" scope="row"><select name="duracao" class="field" id="duracao">
            <option value="" selected="selected"></option>
            <option value="1">1 mês</option>
            <option value="2">2 meses</option>
            <option value="3">3 meses</option>
            <option value="4">4 meses</option>
            <option value="5">5 meses</option>
            <option value="6">6 meses</option>
            <option value="7">7 meses</option>
            <option value="8">8 meses</option>
            <option value="9">9 meses</option>
            <option value="10">10 meses</option>
            <option value="11">11 meses</option>
            <option value="12">12 meses</option>
            <option value="13">13 meses</option>
            <option value="14">14 meses</option>
            <option value="15">15 meses</option>
            <option value="16">16 meses</option>
            <option value="17">17 meses</option>
            <option value="18">18 meses</option>
            <option value="19">19 meses</option>
            <option value="20">20 meses</option>
            <option value="21">21 meses</option>
            <option value="22">22 meses</option>
            <option value="23">23 meses</option>
            <option value="24">24 meses</option>
          </select></td>
          <th scope="row">Valor:</th>
          <th nowrap="nowrap" scope="row">R$
            <input name="valor" type="text" class="field" id="valor" value="0" size="10" onkeyup="calcular()"/></th>
        </tr>
        <tr>
          <td nowrap="nowrap" scope="row">Pessoa Juridica:</td>
          <td colspan="3" scope="row"><select name="id_tipoj" class="field" id="id_tipoj">
            <option value="" selected="selected"></option>
            <?
          $select_empresa = mysql_query("select id,Razao_Social from pessoa_juridica order by id desc");
		  while($r = mysql_fetch_array($select_empresa)){
			  print "<option value=\"$r[0]\">$r[1]</option>";
		  }
          ?>
          </select></td>
          <th nowrap="nowrap" scope="row">Desconto:</th>
          <th nowrap="nowrap" scope="row"><input name="desconto" type="text" class="field" id="desconto" value="0" size="10" maxlength="2" onkeyup="calcular()" />
            %</th>
        </tr>
        <tr>
          <th colspan="4" nowrap="nowrap" scope="row">OU</th>
          <th colspan="2" nowrap="nowrap" scope="row"> </th>
          </tr>
        <tr>
          <td scope="row">Pessoa Fisica:</td>
          <td colspan="3" scope="row"><select name="id_tipof" class="field" id="id_tipof">
            <option value="" selected="selected"></option>
            <?
          $select_empresa = mysql_query("select id,Nome,Sobrenome,Cpf from pessoa_fisica order by id desc");
		  while($r = mysql_fetch_array($select_empresa)){
			  print "<option value=\"$r[0]\">$r[3]-$r[1] $r[2]</option>";
		  }
          ?>
          </select></td>
          <th nowrap="nowrap" scope="row">Valor TOTAL:</th>
          <th nowrap="nowrap" scope="row">R$
            <input name="total" type="text" class="field" id="total" size="10" readonly="readonly"/></th>
        </tr>
        </table>

Codigo do js

<script type="text/javascript">                       
function calcular() {                                
var valor = document.getElementById("valor").value;                               
var desconto = document.getElementById("desconto").value;                               
var total = valor - (desconto * (valor / 100));                              
document.getElementById("total").value = total; 
}              
</script>

Nao intendi essa parte de variavel int ou string

gRoOvE · Julho 10, 2010

Cara, apenas troque o onkeyup das inputs id="valor" e id="desconto" por onblur.

Com onkeyup, você chama a função logo ao digitar a primeira tecla, aí vai sempre faltar uma parte do número caso esse tenha mais de um dígito.

Aqui funciona normalmente sem fazer o parseInt() ou parseFloat(), irá retornar NaN a menos que você digite "10" no campo, ou seja, uma string.

Londim · Julho 12, 2010

Tipo peguei o codigo do cara e relmente est funcionando....

recorto o codigo e jogo na minha pagina para de funcionar!!!!

alguem tem ideia do motivo??

aparece NaN no resultadõ!!!

Londim · Julho 12, 2010

Tipo peguei o codigo do cara e relmente est funcionando....

recorto o codigo e jogo na minha pagina para de funcionar!!!!

alguem tem ideia do motivo??

aparece NaN no resultadõ!!!

RESOLVIDO....

Mudei no script e no form o nome dos fields para

valor1

desconto1

total1

ai deu.

gRoOvE · Julho 13, 2010

hehe, existiam dois ou mais campos na tua página com o mesmo ID Imagem Postada

Arquivado

[Resolvido] Javascript muito simples pra quem sabe

Recommended Posts

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Londim 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante