[Resolvido] COMBOBOX basico

porao · Outubro 12, 2009

Ola pessoal, venho com uma duvida que, pra quem conhece bem de javascript eh uma barbada. Mas pra mim que estou iniciando eh dificil.

A minha duvida é:

Simplificando, tenho um select com 5 opçoes e um input:

<select name='nome'>
<option value='05'>Muito bom</option>
<option value='06'>Medio</option>
<option value='07'>neutro</option>
<option value='08>Ruim</option>
<option value='09'>Pessimo</option>
</select>

<input type='text' name='m_avalia' value=''> <-- so aparece se avalia RUIM ou PESSIMO

So que eu quero que, quando o usuario selecione ruim ou pessimo, abra um input que ficaria escondido, para ele colocar o motivo daquela avaliação.

COmo eu poderi afazer pessoal?

Desde ja agradeço

Thiago Retondar · Outubro 12, 2009

É só trabalhar com onchange e fazer uma verificação nos value.

JavaScript

window.onload = avalia;

function avalia(){
	var select = document.avaliacao.nome; // Cria uma variável select; seu valor é o elemento Select
	select.onchange = function(){ // Ao trocar, execute a função
		var input = document.getElementById("m_avalia"); // Cria uma variável input com elemento Input que vai aparecer e desaparecer
		if((select.value == "08") || (select.value == "09")){ // Se ao trocar, o usuário escolher os valores referentes a "08" ou "09"
			input.style.display = "inline-block"; // Faz o campo aparecer
		} else{ // Se não
			input.style.display = "none"; // Faz o campo desaparecer
		}
	}
}

HTML

<form name="avaliacao">
<select name='nome'>
	<option value='05'>Muito bom</option>
	<option value='06'>Medio</option>
	<option value='07'>neutro</option>
	<option value='08'>Ruim</option>
	<option value='09'>Pessimo</option>
</select>
<input type='text' id='m_avalia' value='Onde devemos melhorar?' />
</form>

Veja que no input,, eu troquei name='m_avalia' por id='m_avalia' para já trabalhar no CSS e JavaScript. ;)

CSS

#m_avalia{
	display: none;
}

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

porao · Outubro 12, 2009

Caramba, muito interessante! vou testar!

Muito obrigado!

Visto que você conhece bem sobre o assunto, você me indicaria alguma referencia para o aprendizado de javascript direcionado ao conteudo dinamico?

Thiago Retondar · Outubro 12, 2009

Pior que eu não sei nada de JavaScript. Estou aprendendo agora. http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif

Eu estou lendo o livro "JavaScript - O guia definitivo" e estou achando excelente. Mas se você não tiver nenhuma noção de JavaScript, vai sentir dificuldade com ele no começo. :(

Eu comentei o código JavaScript. Leia lá para entender como funciona. Se tiver dúvidas quanto a lógica, pergunta aê. :D

O importante é praticar. ^_^

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

porao · Outubro 12, 2009

E eu posso trocar isso:

if((select.value == "08") || (select.value == "09")){

Por isso?

if(select.value > "07"){

Thiago Retondar · Outubro 12, 2009

Sim, pode. Pois JavaScript tenta transforma o string em numeral e avalia com o value.

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

porao · Outubro 12, 2009

Funcionou perfeito! Muito bom mesmo...isso é muito útil

E se no caso o input estivesse no dentro de um <tr><td>INPUT</td></tr>

Eu poderia esconder toda linha usando isso ne?

Thiago Retondar · Outubro 12, 2009

Sim, mas ai teria que atribuir o id ao tr. ^_^

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

porao · Outubro 12, 2009

EU posso fazer assim? )fazdr a linha aparecer so se escolher X opçoes)


<script>
window.onload = avalia;

function avalia(){
        var select = document.avaliacao.nome; // Cria uma variável select; seu valor é o elemento Select
        select.onchange = function(){ // Ao trocar, execute a função
                var input = document.getElementById("m_avalia"); // Cria uma variável input com elemento Input que vai aparecer e desaparecer
                if((select.value < "07")){ // Se ao trocar, o usuário escolher os valores referentes a "08" ou "09"
                        input.style.display = "inline-block"; // Faz o campo aparecer
						document.getElementById('meuDiv').style.visibility = 'visible'
                } else{ // Se não
                        input.style.display = "none"; // Faz o campo desaparecer
						document.getElementById('meuDiv').style.visibility = 'hidden'
						
						
                }
        }
}	
</script>
</head>

<body>
<form name="avaliacao">
<select name='nome'>
        <option value='99'>Muito bom</option>
        <option value='99'>Medio</option>
        <option value='07'>neutro</option>
        <option value='08'>Ruim</option>
        <option value='09'>Pessimo</option>
</select>


<table width="80%" border="0">
  <tr>
    <td bgcolor="#000000"> </td>
  </tr>
  <tr id='meuTR' style='visibility:hidden;'>
    <td bgcolor="#FF0000"><input type='text' id='m_avalia' value='Onde devemos melhorar?' maxlength="100" /></td>
  </tr>
</table></form>

Thiago Retondar · Outubro 12, 2009

Há necessidade no uso de tabelas?

São dados tabulares?

Prefira utilizar display ao invés de visibility.

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

porao · Outubro 12, 2009

Sim, neste caso precisa usar tabela, porque o <select> vem de concatenaçoes e arrays do DB

Thiago Retondar · Outubro 12, 2009

Acho que é isso o que deseja então:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
window.onload = avalia;

function avalia(){
        var select = document.avaliacao.nome;
        var meuTR = document.getElementById("meuTR");
        select.onchange = function(){
                if(select.value > "07"){
                	meuTR.style.display = 'block';
                } else{
                	meuTR.style.display = 'none';
                }
        }
}      
</script>
<body>
<form name="avaliacao">
<select name='nome'>
        <option value='06'>Muito bom</option>
        <option value='06'>Medio</option>
        <option value='07'>neutro</option>
        <option value='08'>Ruim</option>
        <option value='09'>Pessimo</option>
</select>


<table width="80%" border="0">
  <tr>
    <td bgcolor="#000000"> </td>
  </tr>
  <tr id='meuTR' style='display: none'>
    <td bgcolor="#FF0000"><input type='text' id='m_avalia' value='Onde devemos melhorar?' maxlength="100" /></td>
  </tr>
</table></form>
</body>
</html>

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

porao · Outubro 13, 2009

Perfeito!

Muito obrigado

danigglt · Outubro 15, 2009

Muito boa sua dica.

Só to com um probleminha que não to conseguindo resolver.

Seguinte, se eu tiver mais de um select na minha página e quiser aplicar a função aos dois, um deles não funciona.

Segue meu código pra que entenda melhor:

<!--função para habilitar campos dependentes de Tabagismo-->
<script type="text/javascript">
window.onload = Habilita_Cigarro;

function Habilita_Cigarro()
{
        var select = document.FormConsultaAnamnese.lst_tabagismo; // Cria uma variável select; seu valor é o elemento Select
        select.onchange = function()
		{ // Ao trocar, execute a função
                var inputCigarroDia = document.getElementById("tf_qde_cigarros"); // Cria uma variável input com elemento Input que vai aparecer e desaparecer
		var inputTempoTabagismo = document.getElementById("tf_tempo_tabagismo");
                if((select.value == "SIM"))
		{ // Se ao trocar, o usuário escolher SIM
                        inputCigarroDia.style.display = "inline-block"; // Faz o campo aparecer
		        inputTempoTabagismo.style.display = "inline-block";
                } 
		else if(select.value == "NÃO") 
		{ // Se não
                        inputCigarroDia.style.display = "none"; // Faz o campo desaparecer
			inputTempoTabagismo.style.display = "none";
		}
        }
}
</script>


<!--função para habilitar campos dependentes de Etilismo-->
<script type="text/javascript">
window.onload = Habilita_Bebida;

function Habilita_Bebida()
{
        var select = document.FormConsultaAnamnese.lst_anamnese_etilista; // Cria uma variável select; seu valor é o elemento Select
        select.onchange = function()
		{ // Ao trocar, execute a função
                var inputBebida = document.getElementById("tf_consulta_bebida"); // Cria uma variável input com elemento Input que vai aparecer e desaparecer
		var inputFrequencia = document.getElementById("tf_consulta_anamnese_frequencia"); 
		var inputTempoBebe = document.getElementById("tf_tempo_cons_bebida");
                if((select.value == "SIM"))
		{ // Se ao trocar, o usuário escolher SIM
                        inputBebida.style.display = "inline-block"; // Faz o campo aparecer
			inputFrequencia.style.display = "inline-block";
			inputTempoBebe.style.display = "inline-block";
                } else if(select.value == "NÃO") 
		{ // Se não
                        inputBebida.style.display = "none"; // Faz o campo desaparecer
			inputFrequencia.style.display = "none";
			inputTempoBebe.style.display = "none";
                }
        }
}
</script>

Enquanto existia a função aplicada apenas a um select, funcionava, depois que fiz para outro campo, o primeiro parou de funcionar.

Se souber como solucionar esse problema eu agradeço!

:rolleyes:

Thiago Retondar · Outubro 15, 2009

Chame a função assim:

window.onload = function(){
	Habilita_Bebida();
	Habilita_Cigarro();
}

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

danigglt · Outubro 16, 2009

Olá Thiago, gostaria de agradecer a atenção, mas infelizmente não funcionou.

Chamando a função desta forma os inputs não são criados.

Não sei mais o que fazer...

Mais valeu a força.

Thiago Retondar · Outubro 16, 2009

Coloque tudo em um só arquivo .js. Fica melhor.

Vou tirou os window.onload = Habilita_Bebida; e window.onload = Habilita_Cigarro;.

Tire-os e coloque no começo o que eu te mandei.

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

danigglt · Outubro 19, 2009

Olá.

Então, continua não dando certo.

Optei então por fazer da seguinte forma:

<script type="text/javascript">
function desabilitar_campos_etilismo()
{
	var OpcaoEtilismo = document.FormConsultaAnamnese.lst_anamnese_etilista.value;
	if (OpcaoEtilismo == 'SIM')
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = false;
	   document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = false;
	   document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = false;
   else
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = true; 
	   document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = true;
	   document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = true;
	   document.FormConsultaAnamnese.lst_tabagismo.focus();
}

</script>

Porém assim também não está funcionando. Se eu tento habilitar os 3 campos de uma vez (caso a pessoa selecione SIM) não dá certo. Só dá certo se eu tentar habilitar somente um campo.

Sinceramente não estou entendendo mais nada.

Se puder me ajudar eu agradeço. http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

William Bruno · Outubro 19, 2009

Como você está colocando mais de um comando para o IF e para o ELSE, você precisa englobar com {}

if (OpcaoEtilismo == 'SIM'){
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = false;
           document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = false;
           document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = false;
  } else {
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = true; 
           document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = true;
           document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = true;
           document.FormConsultaAnamnese.lst_tabagismo.focus();
}

dê uma estudada em programação básica.

danigglt · Outubro 19, 2009

Como você está colocando mais de um comando para o IF e para o ELSE, você precisa englobar com {}

if (OpcaoEtilismo == 'SIM'){
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = false;
           document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = false;
           document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = false;
  } else {
       document.FormConsultaAnamnese.tf_anamnese_bebida.disabled = true; 
           document.FormConsultaAnamnese.tf_anamnese_freq_bebe.disabled = true;
           document.FormConsultaAnamnese.tf_anamnese_tempo_bebe.disabled = true;
           document.FormConsultaAnamnese.lst_tabagismo.focus();
}

dê uma estudada em programação básica.

Nossa, nem fala...que coisa feia...nem percebi as {}!

Obrigada pelo toque!

Arquivado

[Resolvido] COMBOBOX basico

Recommended Posts

porao 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

porao 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

porao 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

porao 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

porao 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

porao 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

porao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danigglt 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

danigglt 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

danigglt 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

danigglt 0