« anterior próximo »
Páginas: [1]

Autor Tema: habilitar o deshabilitar elementos input con varios formularios HTML  (Leído 7572 veces)

RAM47

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 14
    • Ver Perfil
habilitar o deshabilitar elementos input con varios formularios HTML
« 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.

Código: [Seleccionar]
<!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>
« Última modificación: 16 de Agosto 2016, 15:23 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:habilitar o deshabilitar elementos input con varios formularios HTML
« Respuesta #1 en: 16 de Agosto 2016, 15:23 »
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!
En línea
Responsable de departamento de producción aprenderaprogramar.com

RAM47

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 14
    • Ver Perfil
Re:habilitar o deshabilitar elementos input con varios formularios HTML
« Respuesta #2 en: 16 de Agosto 2016, 23:55 »
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.
Código: [Seleccionar]
<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.
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:habilitar o deshabilitar elementos input con varios formularios HTML
« Respuesta #3 en: 20 de Agosto 2016, 14:35 »
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!
En línea
Responsable de departamento de producción aprenderaprogramar.com

RAM47

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 14
    • Ver Perfil
Re:habilitar o deshabilitar elementos input con varios formularios HTML
« Respuesta #4 en: 25 de Agosto 2016, 21:01 »
Acá adjunto el archivo final con las ultimas modificaciones, específicamente el cambio en el atributo nombre del input radio y las id agregadas.
Código: [Seleccionar]
<!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>
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:habilitar o deshabilitar elementos input con varios formularios HTML
« Respuesta #5 en: 28 de Agosto 2016, 22:51 »
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

Código: [Seleccionar]
if(radios[i].getElementById.checked == "c_mahou")
getElementById no se invoca así, ni siquiera le estás pasando el id...

Salu2
« Última modificación: 31 de Agosto 2016, 19:10 por César Krall »
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".