Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: RAM47 en 12 de Agosto 2016, 00:48
-
Hola. Tengo una página con tres formularios. Sobre ellos hay una etiqueta input radio con tres valores. Necesito enlazar cada valor del input a un formulario, para poder habilitar o deshabilitar los elementos de cada formulario a través de los input. Adjunto el código. Muchas gracias.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>cervezas</title>
<style>
.principal {
height: 50px;
padding-top: 2%;
}
.principal input[type=radio] {
width: 12%;
border: 1px solid #999999;
}
.encabezado {
display: inline-flex;
margin-left: 5.5%;
margin-right: 5.5%;
}
.encabezado-texto {
font: 14px/16px "Helvetica Neue",Arial, Helvetica, sans-serif;
font-weight: 600;
}
.m {
width: 25%;
}
.h {
margin: auto;
width: 25%;
}
.c {
width: 25%;
}
.formulario {
margin-left: 5.5%;
margin-right: 5.5%;
display: inline-flex;
}
.formulario.mahou {
width: 25%;
}
.formulario.heineken {
margin: auto;
width: 25%;
}
.formulario.carlsberg {
width: 25%;
}
.datos label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
input[type="text"]:disabled {
background: #E5E5E5;
}
textarea:disabled {
background: #E5E5E5;
}
select:disabled {
width: 100%;
color: #BBBBBB;
background-color: #E5E5E5;
}
input[type=submit]:disabled {
background-color: #E5E5E5;
color: #BBBBBB;
margin: auto;
}
</style>
</head>
<body>
<div class="principal">
<div class="encabezado m"><input type="radio" name="mahou" value="mahou">
<div class="encabezado-texto">MAHOU</div></div>
<div class="encabezado h"><input type="radio" name="heineken" value="heineken">
<div class="encabezado-texto">HEINEKEN</div></div>
<div class="encabezado c"><input type="radio" name="carlsberg" value="carlsberg" onclick="hrv()">
<div class="encabezado-texto">CARLSBERG</div></div>
</div>
<div class="formulario mahou">
<form name="mahou" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana?:</label>
<select name="vasos-mahou" disabled>
<option value="m1">menos de 10</option>
<option value="m2">menos de 20</option>
<option value="m3">menos de 30</option>
<option value="m4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario heineken">
<form name="heineken" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-heineken" disabled>
<option value="h1">menos de 10</option>
<option value="h2">menos de 20</option>
<option value="h3">menos de 30</option>
<option value="h4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario carlsberg">
<form name="carlsberg" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-carlsberg" disabled>
<option value="c1">menos de 10</option>
<option value="c2">menos de 20</option>
<option value="c3">menos de 30</option>
<option value="c4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
</body>
</html>
-
Hola! Por lo que he entendido sería que al elegir un radio button se pueda escribir en un formulario pero no en los otros (que quedarían deshabilitados). Esto no sería demasiado difícil de hacer con JavaScript. Tendrías que seguir las explicaciones del curso JavaScript desde cero: https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
En concreto en la entrega CU01183E se explica y hay ejemplos de cómo desactivar elementos de un formulario.
Saludos!
-
Antes que nada me di cuenta que la etiqueta input está mal escrita. Las tres opciones debieran tener el mismo nombre. Además agregué una id para cada valor del input. Revisando la entrega desarrollé este código. De todas formas no funcionó. Agradezco cualquier sugerencia.
<script>
window.addEventListener('load', init);
function init(){
var radios = document.getElementsByName ("mahou");
for (var i=0; i<radios.length; i++) {
if(radios[i].getElementById.checked == "c_mahou") {
radios.addEventListener(seleccionar);
}
}
function seleccionar() {
elementosEnForm = document.forms['mahou'].elements;
for (var y=0; y<elementosEnForm.length; y++) {
elementosEnForm[y].disabled=false;
}
}
</script> el código carga una función al inicio que comprueba si una id del input radio está chequeada. Si es así, carga una función que habilita todos los elementos de un formulario.
-
Hola! Para poder probarlo incluye un código html de ejemplo y el código JavaScript en un mismo archivo, así podremos probarlo y ver por qué no responde como tú quisieras.
Saludos!
-
Acá adjunto el archivo final con las ultimas modificaciones, específicamente el cambio en el atributo nombre del input radio y las id agregadas.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>cervezas</title>
<style>
.principal {
height: 50px;
padding-top: 2%;
}
.principal input[type=radio] {
width: 12%;
border: 1px solid #999999;
}
.encabezado {
display: inline-flex;
margin-left: 5.5%;
margin-right: 5.5%;
}
.encabezado-texto {
font: 14px/16px "Helvetica Neue",Arial, Helvetica, sans-serif;
font-weight: 600;
}
.m {
width: 25%;
}
.h {
margin: auto;
width: 25%;
}
.c {
width: 25%;
}
.formulario {
margin-left: 5.5%;
margin-right: 5.5%;
display: inline-flex;
}
.formulario.mahou {
width: 25%;
}
.formulario.heineken {
margin: auto;
width: 25%;
}
.formulario.carlsberg {
width: 25%;
}
.datos label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
input[type="text"]:disabled {
background: #E5E5E5;
}
textarea:disabled {
background: #E5E5E5;
}
select:disabled {
width: 100%;
color: #BBBBBB;
background-color: #E5E5E5;
}
input[type=submit]:disabled {
background-color: #E5E5E5;
color: #BBBBBB;
margin: auto;
}
</style>
<script>
window.addEventListener('load', init);
function init(){
var radios = document.getElementsByName ("cerveza");
for (var i=0; i<radios.length; i++) {
if(radios[i].getElementById.checked == "c_mahou") {
radios.addEventListener(seleccionar);
}
}
function seleccionar() {
elementosEnForm = document.forms['mahou'].elements;
for (var y=0; y<elementosEnForm.length; y++) {
elementosEnForm[y].disabled=false;
}
}
</script>
</head>
<body>
<div class="principal">
<div class="encabezado m"><input type="radio" name="cerveza" value="mahou" id="c_mahou">
<div class="encabezado-texto">MAHOU</div></div>
<div class="encabezado h"><input type="radio" name="cerveza" value="heineken" id="c_heineken">
<div class="encabezado-texto">HEINEKEN</div></div>
<div class="encabezado c"><input type="radio" name="cerveza" value="carlsberg" id="c_carlsberg">
<div class="encabezado-texto">CARLSBERG</div></div>
</div>
<div class="formulario mahou">
<form name="mahou" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana?:</label>
<select name="vasos-mahou" disabled>
<option value="m1">menos de 10</option>
<option value="m2">menos de 20</option>
<option value="m3">menos de 30</option>
<option value="m4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario heineken">
<form name="heineken" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-heineken" disabled>
<option value="h1">menos de 10</option>
<option value="h2">menos de 20</option>
<option value="h3">menos de 30</option>
<option value="h4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario carlsberg">
<form name="carlsberg" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-carlsberg" disabled>
<option value="c1">menos de 10</option>
<option value="c2">menos de 20</option>
<option value="c3">menos de 30</option>
<option value="c4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
</body>
</html>
-
Buenas, si activas el depurador (consola) del navegador aparece el mensaje SyntaxError: missing } after function body en la línea 19, es decir, tienes mal balanceadas las llaves de apertura y cierre
También tienes mal sintaxis por ejemplo
if(radios[i].getElementById.checked == "c_mahou")
getElementById no se invoca así, ni siquiera le estás pasando el id...
Salu2