1

Estoy tratando mostrar un input o un textarea dependiendo de un input radio para guardar los reportes administrativos. Sólo quiero que me orienten un poco ya que no se usar javascript, considerando que es con javascript o jquery se puede hacer esto, no?

<form action="" method="POST">
<input type="radio" name="gender" value="texto"> &#91;text&#93;
<input type="radio" name="gender" value="imagen"> &#91;image&#93;<br>
<input type="text" name="imagen" placeholder="Imagen para reporte"><br>
<textarea name="texto" placeholder="Nota"></textarea><br>
<button name="add">Agregar</button>
</form>

2
  • Java no es la abreviación de JavaScript, es otro lenguaje totalmente diferente.
    – Kleith
    el 3 sep. 2018 a las 19:05
  • Ah, no sabia... gracias
    – Santiaggo
    el 3 sep. 2018 a las 19:06

3 respuestas 3

1

Una forma es utilizando sólo el selector de CSS :checked, que verifica que esté seleccionado la opción, como el ejemplo siguiente:

/* oculto los elementos */
input.i-text, textarea {
  display: none;
}

/* lo muestros si está seleccionado value=imagen */
input.i-radio[value="imagen"]:checked ~ input.i-text {
  display: block;
}

/* lo muestros si está seleccionado value=texto */
input.i-radio[value="texto"]:checked ~ textarea {
  display: block;
}
<form action="" method="POST">
  <input type="radio" name="gender" class="i-radio" value="texto"> &#91;text&#93;
  <input type="radio" name="gender" class="i-radio" value="imagen"> &#91;image&#93;<br>
  <input type="text" name="imagen" class="i-text" placeholder="Imagen para reporte"><br>
  <textarea name="texto" placeholder="Nota"></textarea><br>
  <button name="add">Agregar</button>
</form>


Información

Si necesitás aprender más sobre los selectores CSS te dejo el siguiente link que explican detalladamente cada uno con ejemplos.

2
  • Gracias Kleit, nunca se me ocurrio pensar en hacerlo desde CSS, la verdad me sorprendiste. Comprendo que CSS ha avanzado mucho, pero bueno, me gusto esto. Gracias nuevamente!
    – Santiaggo
    el 3 sep. 2018 a las 18:51
  • Genial esta buenisimo esto, gracias por compartir :) el 3 sep. 2018 a las 19:02
0

Puede usar esto en JQuery

if($("#CHECK").prop("checked")){
    $("#caja").show();
}else{
    $("#caja").hide();
}

Saludos :)

1
  • Gracias Ruben, voy a tratar de aplicarlo!
    – Santiaggo
    el 3 sep. 2018 a las 18:24
0

A ver si he entendido lo que quieres hacer. Lo que he entendido es que necesitas que los input con nombres "imagen" y "texto" tienen que mostrarse u ocultarse dependiendo de cual de los input radio pulses.

Para empezar tendrías que ocultar los dos campos que se mostrarian dependiendo de cual pulses. Yo he usado un display: none que inserto a través del atributo style desde el mismo elemento HTML. Es mejor hacerlo desde CSS pero, ya tú sabes ^^

HTML

 <form action="" method="POST">
  <input type="radio" name="gender" value="texto"> &#91;text&#93;
  <input type="radio" name="gender" value="imagen"> &#91;image&#93;<br>
  <input id="imagen" type="text" name="imagen" placeholder="Imagen para reporte" style="display: none"><br>
  <textarea id="nota" name="texto" placeholder="Nota" style="display: none"></textarea><br>
  <button name="add">Agregar</button>
</form>

He cambiado lo mínimo tu código para que te sea más cómodo, añadiéndole unas IDs a los elementos a mostrar para que sea más sencillo seleccionarlos desde Jquery, y poco más.

Luego ya tendrías que jugar con el valor que tenga el input radio para mostrar u ocultar los elementos dependiendo de este

JQUERY

$("input[name='gender']" ).change(function() {
    if ($(this).val() == 'texto') {
    $('#imagen').show();
    $('#nota').hide();
  }
  else {
    $('#imagen').hide();
    $('#nota').show();
  }
});
1
  • Si, has entendido bien PHPMyguel, voy decirte que me sorprendio ver lo mismo que hiciste pero en CSS como lo hizo Kleith. De igual manera, voy a tener en cuenta ambos, porque Java no es mi fuerte y es bueno tener esta referencia. Muchas gracias por tu ayuda, eres muy amable.
    – Santiaggo
    el 3 sep. 2018 a las 18:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.