Ir para conteúdo

POWERED BY:

Arquivado

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

Lost Dark

[Resolvido] Ocultar e mostrar elemento de um formulario

Por , em Javascript

Recommended Posts

Lost Dark    0

Lost Dark
Postado

Bom dia a todos!!

no meu seguinte formulário a baixo preciso que quando eu seleciono uma opção de um <select> mostre uma div porem não estou conseguindo alguem pode me auxiliar nessa tarefa

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Ismael Oliveira">	
<meta name="description" content="Tabulador de ocorrência AD2-DX3 no padrão.">
<meta name="keywords" content="php, html, css, tabulador">
	<meta http-equiv="content-language" content="pt-br">
<meta name="reply-to" content="ismael.oli.veira@hotmail.com">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	<!--
	$(document).ready(function() {
	$("select#motivo").click(function() {
	$("div#oculto").show();
	});
	});
	-->
</script>
<title>Tabulador 2 teste</title>
<style>
*{
margin: 0 auto;
padding:0 auto;
text-decoration: none;
color: #000;
}
#global{
width: 100%;
height: 100%;
}
#tabulador{
margin: 150px 0px 0px 0px;
border:solid 1px #003366;
}
td{
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 11px;
text-decoration: none;
color: #000000;
}
input{
color:#000;
}
th{
font-size: 25px;
}
</style>
</head>
<body>
<div ="global">
<div id="tabulador">

<table>

<form action="tabulador2.php" method="post">
<tr>
	<th colspan="2">TESTE Tabulador de ocorrência AD2-DX3 no padrão.</th>
</tr>
	<tr>
		<td><label for="motivo"><strong>Motivo da geração :</strong></label></td>
		<td>

		<select id="motivo" name="motivo" type=text size="1" maxlength="1000">
			<option value=""></option>
			<option value="ATIVO REALIZADO">Ativo realizado</option>
			<option value="INFORMATIVO">Informativo</option>
			<option value="TENTATIVA DE ATIVO">Tentativa de ativo</option>
		</select>

		</td>
	</tr>
	<div id="oculto">
			<tr>
		<td><label for="motivo"><strong>Número da OS :</strong></label></td>
		<td>

			<textarea name="obs" cols="26,5" rows="1" ></textarea>

		</td>
	</tr>
	</div>

<tr>
	<td><label for="obs"><strong>Observação :</strong></label></td>
	<td><textarea name="obs" cols="26,5" rows="7" >Ativo sem sucesso</textarea></td> 
</tr>
<tr>
	<td><label for="operador"><strong>Operador :</strong></label></td>
	<td>
	<select name="operador" type=text size="1" maxlength="1000">
		<option value=""></option>
		<option value="ISMAEL">ISMAEL</option>
		<option value="HELIO">HELIO</option>
		<option value="IHATTAMURY">IHATTAMURY</option>
		<option value="ALINE LETICIA">ALINE LETICIA</option>
	</select>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td>
	<input name="submit" type="submit" value="Gerar Obeservação" >
	<input name="reset" type="reset" class="cham1" value="Limpar Campo" />
	</td>
</tr>
</form>
</table>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

http://code.imasters.com.br/index.php?/topic/133-ocultarexibir-elementos-apartir-de-acao-em-radioselect/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então estude o básico de Javascript e HTML.

 

corrija:

 <select id="motivo" name="motivo" type=text size="1" maxlength="1000">

para:

 <select id="motivo" name="motivo" size="1">

 

isso:

                <div id="oculto">
                               <tr>

para:

<tr id="oculto">

e o script:

		$(document).ready(function(){
		$("select[name='motivo']").change(function() {
			//alert( $( this ).val() );
			if( $( this ).val()=='TENTATIVA DE ATIVO' )
				$('#oculto').show();
			else
				$('#oculto').hide();					
		});
	});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lost Dark    0

Lost Dark
Postado

vlw pela ajuda e desculpe a ignorância!! :(

 

Fiz como você disse só que ainda não está funcionando!!

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabulador 2 teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Ismael Oliveira">	
<meta name="description" content="Tabulador de ocorrência AD2-DX3 no padrão.">
<meta name="keywords" content="php, html, css, tabulador">
	<meta http-equiv="content-language" content="pt-br">
<meta name="reply-to" content="ismael.oli.veira@hotmail.com">
<script type="text/javascript" src="jquery-1.4.2.min.js">
               $(document).ready(function(){
						$("select[name='motivo']").change(function() {
                               //alert( $( this ).val() );
                               if( $( this ).val() == 'TENTATIVA DE ATIVO' )
                                       $('#oculto').show();
                               else
                                       $('#oculto').hide();                                    
                       });
               });
</script>

<style>
*{
margin: 0 auto;
padding:0 auto;
text-decoration: none;
color: #000;
}
#global{
width: 100%;
height: 100%;
}
#tabulador{
margin: 150px 0px 0px 0px;
border:solid 1px #003366;
}
td{
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 11px;
text-decoration: none;
color: #000000;
}
input{
color:#000;
}
th{
font-size: 25px;
}/*
#oculto{
display:none;
}*/

</style>
</head>
<body>
<div ="global">
<div id="tabulador">

<table>

<form action="tabulador2.php" method="post">
<tr>
	<th colspan="2">TESTE Tabulador de ocorrência AD2-DX3 no padrão.</th>
</tr>
	<tr>
		<td><label for="motivo"><strong>Motivo da geração :</strong></label></td>
		<td>
			 <select id="motivo" name="motivo" size="1">
				<option value=""></option>
				<option value="TENTATIVA DE ATIVO">Tentativa de ativo</option>
				<option value="INFORMATIVO">Informativo</option>
				<option value="ATIVO REALIZADO">Ativo realizado</option>
			</select>

		</td>
	</tr>
	<tr id="oculto">
		<td><label for="obs"><strong>Número da O.S :</strong></label></td>
		<td><textarea name="obs" cols="26,5" rows="1" ></textarea></td>
	</tr>             

<tr>
	<td><label for="obs"><strong>Observação :</strong></label></td>
	<td><textarea name="obs" cols="26,5" rows="7" >Ativo sem sucesso</textarea></td> 
</tr>
<tr>
	<td><label for="operador"><strong>Operador :</strong></label></td>
	<td>
	<select name="operador" type=text size="1" maxlength="1000">
		<option value=""></option>
		<option value="ISMAEL">ISMAEL</option>
		<option value="HELIO">HELIO</option>
		<option value="IHATTAMURY">IHATTAMURY</option>
		<option value="ALINE LETICIA">ALINE LETICIA</option>
	</select>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td>
	<input name="submit" type="submit" value="Gerar Obeservação" >
	<input name="reset" type="reset" class="cham1" value="Limpar Campo" />
	</td>
</tr>
</form>
</table>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, isso aqui:

 <script type="text/javascript" src="jquery-1.4.2.min.js">
$(document).ready(function(){

não existe.

o correto é:

	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

verifique se o teu jquery, tem esse 'nome' mesmo, ali eu coloquei o meu arquivo: jquery-1.4.2.min.js, se o teu for outro, modifique.

 

 

mesmo que o titulo tenha sido editado para [Resolvido], o tópico continua 'aberto'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lost Dark    0

Lost Dark
Postado

Opa obrigado pela ajuda consegui ta do jeito que eu queria

para quem quiser o codigo esta funcional sei que é simples mais minha dúvida pode ser a dúvida do próximo

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <title>Tabulador 2 teste</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <meta name="author" content="Ismael Oliveira">  
       <meta name="description" content="Tabulador de ocorrência AD2-DX3 no padrão.">
       <meta name="keywords" content="php, html, css, tabulador">
               <meta http-equiv="content-language" content="pt-br">
       <meta name="reply-to" content="ismael.oli.veira@hotmail.com">
       <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
	<script type="text/javascript">
               $(document).ready(function(){
                       $("select[name='motivo']").change(function() {
                               //alert( $( this ).val() );
                               if( $( this ).val()=='ATIVO REALIZADO' )
                                       $('#oculto').show();
                               else
                                       $('#oculto').hide();                                    
                       });
               });
       </script>

<style>
*{
       margin: 0 auto;
       padding:0 auto;
       text-decoration: none;
       color: #000;
}
#global{
       width: 100%;
       height: 100%;
}
#tabulador{
       margin: 150px 0px 0px 0px;
       border:solid 1px #003366;
}
td{
       font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
       font-size: 11px;
       text-decoration: none;
       color: #000000;
}
input{
       color:#000;
}
th{
       font-size: 25px;
}
#oculto{
display: none;
}

</style>
</head>
<body>
<div ="global">
<div id="tabulador">

<table>

<form action="tabulador2.php" method="post">
       <tr>
               <th colspan="2">TESTE Tabulador de ocorrência AD2-DX3 no padrão.</th>
       </tr>
               <tr>
                       <td><label for="motivo"><strong>Motivo da geração :</strong></label></td>
                       <td>
                                <select id="motivo" name="motivo" size="1">
                                       <option value=""></option>
                                       <option value="TENTATIVA DE ATIVO">Tentativa de ativo</option>
                                       <option value="INFORMATIVO">Informativo</option>
                                       <option value="ATIVO REALIZADO">Ativo realizado</option>
                               </select>

                       </td>
               </tr>
               <tr id="oculto">
                       <td><label for="obs"><strong>Número da O.S :</strong></label></td>
                       <td><textarea name="obs" cols="26,5" rows="1" ></textarea></td>
               </tr>             

       <tr>
               <td><label for="obs"><strong>Observação :</strong></label></td>
               <td><textarea name="obs" cols="26,5" rows="7" >Ativo sem sucesso</textarea></td> 
       </tr>
       <tr>
               <td><label for="operador"><strong>Operador :</strong></label></td>
               <td>
               <select name="operador" type=text size="1" maxlength="1000">
                       <option value=""></option>
                       <option value="ISMAEL">ISMAEL</option>
                       <option value="HELIO">HELIO</option>
                       <option value="IHATTAMURY">IHATTAMURY</option>
                       <option value="ALINE LETICIA">ALINE LETICIA</option>
               </select>
               </td>
       </tr>
       <tr>
               <td>
               </td>
               <td>
               <input name="submit" type="submit" value="Gerar Obeservação" >
               <input name="reset" type="reset" class="cham1" value="Limpar Campo" />
               </td>
       </tr>
</form>
</table>
</div>
</div>
</body>
</html>

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