Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

BlackeR

pegar valor de um formulário

Por , em Javascript

Recommended Posts

BlackeR    0

BlackeR
Postado

Olá pessoal, estou começando a mexer com javascript e jquery e estou com problema aqui:

 

Estou tentando tirar o valor de um input para fazer um calculo mas não consigo fazer isso. Veja os códigos:

 

<html>
<head>
<title>Conversores</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript"src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#titlebox').toggle(function(){
                $('#convbox').slideDown("fast");
},function(){
	$('#convbox').slideUp("fast");

    }); });
var celsius = document.getElementById("grau").value;
function conta(){
alert("O resultado é: "+celsius);
}
</script>
</script>
</head>
<body>

<h1 id="titulo">Conversores</h1>
<div id="corpo">
<h2>Temperaturas</h2>
<div class="box">
<a href="#"><div id="titlebox">Celsius para Kevin</div></a>
	<div id="convbox">
<center>
<form name="temperatura">
<p>
<input type="text" id="grau" name="grau" />
dá <span id="resultado"></span> </p>
<input type="button" value="Converter" onClick="conta()"/></form>
</center>
</div>
		
	</div>

</div>
</body>
</html>

CSS:

 

body {
font-family: Verdana;
}
#titulo {
text-align: center;
}
#corpo {
margin: 100px auto 100px auto;
max-width: 1000px;
border: 3px solid #ff0000;
}
.box {
border: 2px solid #000000;
}
#titlebox {
height: 30px;
background: #d2d5d3;
}
a {
text-decoration: none;
color: #000000;
}
#convbox {
height:200px;
border: 1px solid #000000;
display:none;
background: #f4f4f4;
}
form input {

border: 2px solid #000000;
height: 50px;
width: 200px;
font-size: 30px;
}
#resultado {
border: 2px solid #000000;
padding: 5px;
font-size: 30px;
background: #ffffff;
}

Upei para o meu servidor para vocês verem:

 

http://www.idevice.com.br/teste/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, na linha 15 da página que você colocou no servidor para testarmos, está assim:

var resultado = celsis+273;

Sendo que deveria ser:

var resultado = celsius+273;

Verifique no seu arquivo PHP, afinal você determina a conta dinamicamente, né? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

 

Outra coisa, é necessário converter o value do input em int, utilizando o parseInt( ).

 

Fiz uma versão simplificada de sua página já com o código arrumado (deixei apenas o formulário). Ah! A conversão deixei dentro do jQuery mesmo, eliminando assim a necessidade de utilizar o onclick no botão, veja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Conversores</title>
	<script type="text/javascript"src="jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		$('button#converter').click(function()
		{
			var celsius = parseInt($('input#grau').val());
			var resultado = celsius + 273;

			alert("O resultado é: " + resultado);
		});
	});
	</script>
</head>
<body>
	<form action="#" id="temperatura">
		<fieldset>
			<input type="text" id="grau" name="grau" />
			<br />
			<button type="button" id="converter">Converter</button>
		</fieldset>
	</form>
</body>
</html>
Obs.: Adicionei um Doctype à página e também alterei o formulário para que ficasse de acordo com os padrões... B)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Está faltando consertar o link para o arquivo do jQuery (jquery.js), e salve sua página com o charset UTF-8 para evitar erros de codificação de caracteres acentuados.

 

Obs.: Eu também testei no FF 3.6.8, aliás, na maioria das vezes os exemplos que faço para os membros aqui nos fóruns eu testo apenas no FF... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Tem sim, mas é necessário efetuar algumas alterações.

 

No HTML, troque:

<div id="convbox">
<center>
<form action="#" id="temperatura">
<p>
<input type="text" id="grau" name="grau" />
dá <span id="resultado"></span> </p>
<input type="button" id="converter" value="Converter" /></form>
</center>
</div>
Por esse código abaixo:

<div id="convbox">
<center>
<form action="#" id="temperatura">
<p><input type="text" id="grau" name="grau" /></p>
<input type="button" id="converter" value="Converter" /></form>
</center>
</div>
Observe que removi o <span id="resultado"></span>.

 

Agora, no código jQuery, troque:

$('input#converter').click(function()
{
    var celsius = parseInt($('input#grau').val());
    var resultado = celsius + 273;
    var texto = "o seu resultado dá "+resultado; 
    $('#convbox').append("O Resultado é "+resultado+"º");
});
Por esse código abaixo:

$('input#converter').click(function()
{
    var celsius = parseInt($('input#grau').val());
    var resultado = celsius + 273;
    var texto = "o seu resultado dá "+resultado;

    if($('p#resultado').length == 0)
    {
        $('div#convbox').append('<p id="resultado"></p>');
    }

    $('p#resultado').text("O Resultado é "+resultado+"º");
});

Mas uma recomendação: não crie páginas sem um Doctype e também não se esqueça de definir um charset para a página para evitar que caracteres estranhos sejam exibidos no lugar dos caracteres acentuados.

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

Obrigado mesmo Paulo, está funcionando redondo. Como eu vou adicionar vários "#convbox" na página, eu teria que nomear cada um com um nome diferente e um script de toggle diferente para cada um ? Tentei transformar o convbox em classe e usá-lo em outras caixas, mas quando clico em uma, todos abrem/fecham...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Nesse caso, crie uma classe para todos e um id diferente para cada um. Ao clicar, na sua função que faz o toggle, pega o ID da convbox que você precisa. Mas primeiro, você precisa alterar o #titlebox, pois, se haverá mais do que um na página, então nesse caso também não poderá ser um id. Vamos a um exemplo com três na tela:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Conversores</title>
	<style type="text/css">
	* {
		margin:0;
		padding:0;
	}
	body { margin:20px; }
	ul { margin:20px 0 20px 25px; }
	div.conversor {
		display:none;
		margin:0 0 20px;
		padding:20px;
		background-color:#eee;
		border:1px dotted #f00;
	}
	div.conversor form fieldset {
		padding:10px;
		background-color:#ffc;
		border:1px solid #ccc;
	}
	div.conversor form fieldset legend { font-weight:bold; }
	</style>
	<script type="text/javascript"src="jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		$('ul li a').click(function()
		{
			var conversor = $(this).attr('href').replace('#', '');

			$('div#' + conversor).toggle('fast');

			return false;
		});

		$('button').click(function()
		{
			// Identifica o input que irá pegar o valor com base no id
			var id = $(this).attr('id').replace('converter-', 'grau-');

			var celsius = parseInt($('input#' + id).val());
			var resultado = celsius + 273;

			alert("O resultado é: " + resultado);
		});
	});
	</script>
</head>
<body>
	<h1>Escolha um conversor:</h1>
	<ul>
		<li><a href="#conversor-1">Conversor 1</a></li>
		<li><a href="#conversor-2">Conversor 2</a></li>
		<li><a href="#conversor-3">Conversor 3</a></li>
	</ul>

	<div class="conversor" id="conversor-1">
		<form action="#">
			<fieldset>
				<legend>Conversor 1</legend>
				<input type="text" id="grau-1" name="grau" />
				<button type="button" id="converter-1">Converter</button>
			</fieldset>
		</form>
	</div>

	<div class="conversor" id="conversor-2">
		<form action="#">
			<fieldset>
				<legend>Conversor 2</legend>
				<input type="text" id="grau-2" name="grau" />
				<button type="button" id="converter-2">Converter</button>
			</fieldset>
		</form>
	</div>

	<div class="conversor" id="conversor-3">
		<form action="#">
			<fieldset>
				<legend>Conversor 3</legend>
				<input type="text" id="grau-3" name="grau" />
				<button type="button" id="converter-3">Converter</button>
			</fieldset>
		</form>
	</div>
</body>
</html>
Observe que coloquei o tal do Doctype (novamente :P ), defini um charset (novamente² :P ) e deixei um CSS na própria página apenas para ficar mais agradável. Bom, agora é com você... Compare, tire linhas do meu script, altere, enfim, detone este código de ponta a ponta para entender o que foi feito e tals...

 

Um abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

Opa, esse código é complicado o.o

 

Acho que consegui fazer, mas tipo, o slide não funciona, ele desce mais não sobe. E mais, para que serve o return false ?

 

Acho que o código de conversão precisa repetir, já que cada conversão vai ser diferente da outra.

Upei a página para você ver. juntei o css no mesmo arquivo para ajudar:

 

http://www.idevice.com.br/teste/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Qual ou quais partes do código você não entendeu?

 

O return false no meu exemplo serve para evitar que a ação do link seja efetuada, ou seja, ele anula o clique... Sem o return false, ao clicar no primeiro link do meu exemplo, a URL ficaria assim:

Bom, para fazer sua página funcionar, vamos corrigir os erros da marcação primeiro? http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Desculpe-me, sou muito rigoroso quanto a isso (padrões web), e todos os exemplos que faço procuro sempre fazer tudo sem erro, para evitar dores de cabeça...

 

Para corrigir os erros, valide sua página:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://validator.w3.org/check?uri=http%3A%2F%2Fwww.idevice.com.br%2Fteste%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

Pense pelo lado positivo: além de te ajudar nessa questão dos conversores, irá aprender um pouco mais sobre os padrões web! :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

hahaha, já corrigi a marcação, validei o documento, coloquei os selos de validado, enfim, estou bem na fita agora.

 

Voltando ao conversor, eu consegui corrigir o problema do slide com o sligeToggle(). Mas sugiu problemas. Tentei a página em outros browser (safari, chrome e internet explorer 8) e em nenhum deles o botão Converter funcionou. Aparece que ele fica bloqueado =s

 

Outra coisa, como faço para o script aceitar número negativo, uma vez que é necessário numa conversão de temperatura. Obrigado

 

O link já está atualizado: http://www.idevice.com.br/teste/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Como diria Jack, O Estripador, "vamos por partes..." :P

 

Bom, primeiro ponto: você terá conversores para quais unidades de medida, além do Kelvin? Já faça a inclusão dos conversores desejados, sem se preocupar ainda com validação, exibição dos resultados, etc. Apenas crie os conversores que desejar, e depois vamos adaptar o código para que funcione em todos, ok?

 

Outra coisa, a conversão é determinada via PHP ou elas todas vão ficar diretamente no código, como no caso da conversão de Celsius para Kelvin?

 

Por enquanto é só. Aguenta as pontas a e porque nem sempre consigo acessar ao fórum, mas não se preocupe que não vou esquecer de você não, ok?

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

eu queria fazer conversor de tudo, como temperaturas, medidas, etc. Estava pensando em fazer um conversor funcional e a partir deste fazer os outros.

 

A conversão eu preferia que fosse pelo código porque eu não aprendi PHP ainda e também quero que a página seja mais rápida possível.

 

Então vou fazer os modelos dos conversões.

 

Posso te fazer uma pergunta ? Eu ainda não aprendi javascript e meio que o pulei e fui direto para jquery. Isso é bom ? Ou seria bom eu aprender o javascript para depois usar o jquery ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Eu ainda não aprendi javascript e meio que o pulei e fui direto para jquery. Isso é bom ? Ou seria bom eu aprender o javascript para depois usar o jquery ?

 

Bom, o ideal é que se aprenda um mínimo necessário de Javascript "puro", pois você utiliza, mesmo com jQuery. Agora, o fato é que com jQuery, tudo fica muito mais fácil... E quem conhece CSS se dá muito bem com ele por causa disso, ele utiliza a sintaxe de seletores do CSS como base para selecionar qualquer elemento em sua página...

 

Minha sugestão é: aprenda Javascript, não importa quando. Se quiser ir testando jQuery, até pode, mas tenha em mente que o aprendizado do JS é necessário de qualquer forma, pois precisará montar estruturas de looping, verificações, utilizará funções que não existem com jQuery, etc.

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

certo, estou aprendendo jquery e ao mesmo tempo procurando algumas coisas de javascript, para entender o jquery melhor.

 

Preciso de uma ajuda. Estava praticando jquery e resolvi fazer um meio que menu:

 

www.idevice.com.br/teste/div.html

 

Tente passar o mouse direto de apple para windows. A div do windows fica louco. Qual é o problema ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Isso acontece porque os efeitos entram na fila de execução e continuam mesmo que você já tenha tirado o mouse, por exemplo, quando o efeito é feito com mouseover. Bom, eu ainda não testei, ainda não encontrei uma situação em algo semelhante aconteceu, mas no link abaixo você tem as funções do jQuery utilizadas para controlar as animações:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://api.jquery.com/category/effects/

 

Veja as funções .clearQueue(), .dequeue(), .stop(). Mas fique atento quanto à versão do jQuery que está utilizando, pois há funções que foram implementadas nas primeiras versões, mas há aquelas incorporadas na última, v1.4, como a .clearQueue().

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

se é uma 'nova dúvida', abra um novo tópico.

 

o melhor do jquery, são os seletores.. use-os melhor:

$(document).ready(function(){
	$('ul#menu li').mouseover(function(){
		$( this ).css({backgroundPosition: '0 0'});
	});
	$('ul#menu li').mouseout(function(){
		$( this ).css({backgroundPosition: '0 -40'});
	});
});
oque você fez, de atribuir um ID a cada LI, não era necessário.. e estava causando o problema..

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito