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
    Commented el 3 sept. 2018 a las 19:05
  • Ah, no sabia... gracias
    – Santiaggo
    Commented el 3 sept. 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
    Commented el 3 sept. 2018 a las 18:51
  • Genial esta buenisimo esto, gracias por compartir :) Commented el 3 sept. 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
    Commented el 3 sept. 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
    Commented el 3 sept. 2018 a las 18:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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