Mostrar casilla input tras elegir opcion en un select

[neodani]

Buenas,

No sabía como poner el titulo del post... y tampoco sé si es posible realizar esto, por lo que os pido consejo y ayuda!

Dispongo de un formulario

Código PHP:

  <div id="form3"> 
        <form action="/includes/procesa_formulario.php" method="post"> 
            <fieldset> 
            <legend>Crear Tarea</legend> 
                <label for="asunto">Asunto: </label> 
                    <!--<input type="text" id="usuario" name="usuario" tabindex="1" value="" title="Usuario" size="35"/><br/>--> 
                    <textarea name="asunto" style="width:60%" rows="5" id="asunto" title="Asunto"></textarea><br/> 
 
                <label for="prioridad">Prioridad: </label> 
                    <input name="prioridad" type="radio" value="1"/> Alta<input name="prioridad" type="radio" value="2" checked/> Normal<input name="prioridad" type="radio" value="3"/> Baja<br/> 
                 
                <label for="categoria">Categoria: </label> 
                    <select name="categoria" id="categoria"  tabindex="3"> 
                        <option value="cat1">Categoria 1</option> 
                        <option value="cat2">Categoria 2</option> 
                        <option value="cat1">Nueva Categoria</option> 
                    </select><br> 
     
                <label for="categoria">Nueva Categoria: </label>     
                    <input type="text" id="categoria" name="categoria" tabindex="1" value="" title="Categoria" size="40"/><br/> 
                    <small>Deja en blanco si no quieres agregar una nueva categoría.</small> 
 
                <label for="invisible">&nbsp;</label> 
                <input type="submit" value="Guardar" id="submit" tabindex="6"/> <input type="reset" id="reset" tabindex="7"/> 
            </fieldset> 
        </form> 
        </div>  
   

Mi objetivo es que el penúltimo input, el que habla de Nueva categoría este oculto

Código:

<label for="categoria">Nueva Categoria: </label>	
					<input type="text" id="categoria" name="categoria" tabindex="1" value="" title="Categoria" size="40"/><br/>
					<small>Deja en blanco si no quieres agregar una nueva categoría.</small>

Y solo aparezca cuando en el menu select de arriba esté seleccionada la opción "Nueva Categoria".

Se puede hacer esto?

La idea es que en el select quiero que se cargue las categorias que hay en la base de datos, pero para no limitar a esas categorias si el usuario decide seleccionar "Nueva Categoria" que le aparezca la opción de introducir su propia categoría.

Muchas gracias de antemano.

Un saludo y Feliz 2009

[gilitos92]

Esto no te conviene hacerlo con PHP ya que en lo que hace el request al servidor para determinar si selecciono nueva categoria se pierden los datos (que podrias recuperar pero es mas dificil y mas carga al servidor) te recomiendo que uses javascript, de hecho me pregunto si este post no deberia estar en la seccion de javascript.

Saludos y suerte

[jam1138]

Coincido en que JavaScript es "la mejor opción". Muevo el tema desde PHP esperando obtengas mejores resultados.

Suerte

[neodani]

Iniciado por gilitos92

Esto no te conviene hacerlo con PHP ya que en lo que hace el request al servidor para determinar si selecciono nueva categoria se pierden los datos (que podrias recuperar pero es mas dificil y mas carga al servidor) te recomiendo que uses javascript, de hecho me pregunto si este post no deberia estar en la seccion de javascript.

Saludos y suerte

Ufff muchas gracias, pues me has matado... porque con javascript estoy vendido....

Es muy difícil de hacer?

Muchas gracias

[marcopoloaz06]

hola, creo quedaria asi:

Código HTML:

 <div id="form3">
        <form action="/includes/procesa_formulario.php" method="post">
            <fieldset>
            <legend>Crear Tarea</legend>
                <label for="asunto">Asunto: </label>
                    <!--<input type="text" id="usuario" name="usuario" tabindex="1" value="" title="Usuario" size="35"/><br/>-->
                    <textarea name="asunto" style="width:60%" rows="5" id="asunto" title="Asunto"></textarea><br/>

                <label for="prioridad">Prioridad: </label>
                    <input name="prioridad" type="radio" value="1"/> Alta<input name="prioridad" type="radio" value="2" checked/> Normal<input name="prioridad" type="radio" value="3"/> Baja<br/>
                
                <label for="categoria">Categoria: </label>
                    <select name="categoria" id="categoria"  tabindex="3" onChange="document.getElementById('nCategoria').disabled=this.selectedIndex!=2">
                        <option value="cat1">Categoria 1</option>
                        <option value="cat2">Categoria 2</option>
                        <option value="cat1">Nueva Categoria</option>
                    </select><br>
    
                <label for="categoria">Nueva Categoria: </label>    
                    <input type="text" id="nCategoria" name="categoria" tabindex="1" value="" title="Categoria" size="40" disabled="true" /><br/>
                    <small>Deja en blanco si no quieres agregar una nueva categoría.</small>

                <label for="invisible">&nbsp;</label>
                <input type="submit" value="Guardar" id="submit" tabindex="6"/> <input type="reset" id="reset" tabindex="7"/>
            </fieldset>
        </form>
        </div> 

saludos
:]

[neodani]

Iniciado por marcopoloaz06

hola, creo quedaria asi:

Código HTML:

 <div id="form3">
        <form action="/includes/procesa_formulario.php" method="post">
            <fieldset>
            <legend>Crear Tarea</legend>
                <label for="asunto">Asunto: </label>
                    <!--<input type="text" id="usuario" name="usuario" tabindex="1" value="" title="Usuario" size="35"/><br/>-->
                    <textarea name="asunto" style="width:60%" rows="5" id="asunto" title="Asunto"></textarea><br/>

                <label for="prioridad">Prioridad: </label>
                    <input name="prioridad" type="radio" value="1"/> Alta<input name="prioridad" type="radio" value="2" checked/> Normal<input name="prioridad" type="radio" value="3"/> Baja<br/>
                
                <label for="categoria">Categoria: </label>
                    <select name="categoria" id="categoria"  tabindex="3" onChange="document.getElementById('nCategoria').disabled=this.selectedIndex!=2">
                        <option value="cat1">Categoria 1</option>
                        <option value="cat2">Categoria 2</option>
                        <option value="cat1">Nueva Categoria</option>
                    </select><br>
    
                <label for="categoria">Nueva Categoria: </label>    
                    <input type="text" id="nCategoria" name="categoria" tabindex="1" value="" title="Categoria" size="40" disabled="true" /><br/>
                    <small>Deja en blanco si no quieres agregar una nueva categoría.</small>

                <label for="invisible">&nbsp;</label>
                <input type="submit" value="Guardar" id="submit" tabindex="6"/> <input type="reset" id="reset" tabindex="7"/>
            </fieldset>
        </form>
        </div> 

saludos
:]

Ey!! muchas gracias, ese era el efecto que buscaba!