.Show & .Hide em Formulário

[K3lv!N 0]

Boa tarde galera...Estou desenvolvendo a parte de administração de um site e agora preciso fazer a parte de cadastro de Posts, Então eu tenho Os Posts divididos por categoria: Cursos, Produtos e Novidades.

 

Eu tenho o Form criado, E tenho 2 Campos que são referentes ao valor dos Produtos, são eles os Campos Valor Real e Valor Pag Seguro.

 

Preciso que eles apareçam apenas quando eu selecionar a categoria produtos, e sumir após selecionar outra categoria...

 

Aki é o Script que tenho, eu não consegui detectar o Problema, Ele simplesmente não funciona...

 

Scripts Java

 

<script type="text/javascript" src="../scripts/jquery.js"></script> Aki é o Jquery
<script type="text/javascript">
$(function(){

	$("#produtos") .click(function(){

		$("#produtos_class") .show("slow");

});

});
</script>

 

 

Formulário

 

<form name="cadastrar_posts" method="post" action="" enctype="multipart/form-data">
                 <fieldset>
                    <label>
                     <span>Imagem de exibição</span>
                     	<input type="file" name="thumb" size="60"  />
                    </label>

                    <label>
                     <span>Titulo</span>
                     	<input type="text" name="titulo"  />
                    </label>

                    <label>
                     <span>Texto</span>
                     	<textarea name="texto" rows="5"></textarea>
                    </label>

                    <label>
                     <span>Categoria</span>
                     	<select name="categoria" id="categoria">
                       <option value="-1">Selecione a Categoria</option>
                       <option value="novidades" id="novidades">Novidades</option>
                       <option value="cursos" id="cursos">Cursos</option>
                       <option value="produtos" id="produtos">Produtos</option>

                       </select>
                    </label>

                    <label>
                     <span>Data</span>
                     	<input type="text" name="data"  />
                    </label>

                    <label>
                     <span>Autor</span>
                     	<input type="text" name="autor"  />
                    </label>
                    <div id="produtos_class" style="display:none;">
                    <label>
                     <span>Valor R$</span>
                     	<input type="text" name="valor_real"  />
                    </label>

                    <label>
                     <span>Valor PagSeguro</span>
                     	<input type="text" name="valor_pagseguro"  />
                    </label>
                    </div> <!-- DIV CLASS -->

                    <input type="submit" value="Cadastrar" name="Cadastrar" class="cadastro_btn" />
			</fieldset>
            </form>

 

Obrigado pela atenção!!!

[Ted k' 126]

Um exemplo simples:

 

<script type="text/javascript">
function funcao(valor){
var div = $("#produtos_class");

if (valor == "produtos"){
	div.show();
}
else {
	div.hide();
}
}
</script>

 

<select name="categoria" id="categoria" onChange="funcao(this.value)">
<option value="-1">Selecione a Categoria</option>
<option value="novidades">Novidades</option>
<option value="cursos">Cursos</option>
<option value="produtos">Produtos</option>
</select>

[K3lv!N 0]

Funfoo não...Alguem aew Tem alguma idéia, do que seja?

[William Bruno 1501]

Ctrl+Shift+J no Firefox, aparece algum erro ?

se aparecer, corrija.

 

como está o teu codigo mais atual ?

[K3lv!N 0]

Opa...Gente, eu uso o Chrome como navegador...Corriji alguns erros e abri com o Firefox e Funfou beleza.No chrome não..Qual que é essas dos Navegadores??

[William Bruno 1501]

geralmente o problema é o teu código e não os navegadores.

 

mostre como está.

[Ted k' 126]

Estranho eu testei em meus navegadores aqui, todos funcionaram! :huh:

[K3lv!N 0]

POST DE CADASTRO

 

<?php include"scripts/restrict_no.php" ;?>
<?php include"header.php" ;?>
<div id="box">

<div id="header">

</div> <!-- HEADER -->

<div id="content">

	<div id="menu">
		<?php include"menu.php"; ?>
	</div> <!--MENU-->

	<div id="conteudo">

       <span class="caminho">Home » Cadastrar Posts</span>

       	<h1>Cadastrar Posts</h1>

           	<form name="cadastrar_posts" method="post" action="" enctype="multipart/form-data">
                 <fieldset>
                    <label>
                     <span>Imagem de exibição</span>
                     	<input type="file" name="thumb" class="thumb" size="30"  />
                    </label>

                    <label>
                     <span>Titulo</span>
                     	<input type="text" name="titulo"  />
                    </label>

                    <label>
                     <span>Texto</span>
                     	<textarea name="texto" rows="5"></textarea>
                    </label>

                    <label>
                     <span>Categoria</span>
                     	<select name="categoria" id="categoria">
                       <option value="-1">Selecione a Categoria</option>
                       <option value="novidades" id="novidades">Novidades</option>
                       <option value="cursos" id="cursos">Cursos</option>
                       <option value="produtos" id="produtos">Produtos</option>

                       </select>
                    </label>

                    <label>
                     <span>Data</span>
                     	<input type="text" name="data"  />
                    </label>

                    <label>
                     <span>Autor</span>
                     	<input type="text" name="autor"  />
                    </label>
                    <div id="produtos_class" style="display:none;">
                    <label>
                     <span>Valor R$</span>
                     	<input type="text" name="valor_real"  />
                    </label>

                    <label>
                     <span>Valor PagSeguro</span>
                     	<input type="text" name="valor_pagseguro"  />
                    </label>
                    </div> <!-- DIV CLASS -->

                    <input type="submit" value="Cadastrar" name="Cadastrar" class="cadastro_btn" />
			</fieldset>
            </form>

	</div> <!--CONTEUDO-->

</div> <!--CONTENT-->
<div id="clear"></div>
</div> <!-- BOX -->

<?php include"footer.php"; ?>	

 

AKI É A FUNÇÃO

 

	$(function(){

	$("#produtos") .click(function(){

		$("#produtos_class") .show("slow");

});
	$("#cursos") .click(function(){

		$("#produtos_class") .hide("slow");

});

	$("#novidades") .click(function(){

		$("#produtos_class") .hide("slow");	

});

});

 

AKI é o Scripts.PHP que CHAMA A FUNÇÃO

 

<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/cadastros_posts_func.js"></script>

[William Bruno 1501]

-> não faz sentido o onclick nos options

-> não dê IDs aos options

 

-> aplique a sugestão do Ted k'

 

exemplo:

http://wbruno.com.br/blog/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

[K3lv!N 0]

Mais hein Ted k...Meu Script funcionou ai nos navegadores??

[William Bruno 1501]

Não, o script que ele disse q funcionou foi o dele.

 

veja o link que postei, e não use onclick e nem id em options. (erro conceitual)

[Ted k' 126]

cara, agora você tem duas opcoes que funcionam... uma minha e do Bruno, só escolher, adaptar e testar

[K3lv!N 0]

Vo tentar adaptar...Sou Muito novo na área...To na base de tutoriais...Qualquer coisa posto aqui, agradeço a ajuda de vocês!!!