0

¡Hola! Soy muy nuevo en Javascript y estoy desarrollando un proyecto en el que dependiendo de una selección radial, debe aparecer uno de dos divs que están escondidos. La parte complicada es que estoy generando campos dependiendo de un cierto número de usuarios. Hasta ahora se ve así:

function updateItems(_this) {
      var ItemCount = +_this.value;
      var results = document.querySelector('#results');
      results.innerHTML = '';
      for (var i = 1; i <= ItemCount; i++) {
          var input = document.createElement('input');
          var label = document.createElement("label");
          var contenedor1 = document.createElement("div");
          contenedor1.className = 'contenedor1';
          contenedor1.id = 'contiene1' + i;
          var contenedor2 = document.createElement("div");
          contenedor2.className = 'contenedor2';
          contenedor2.id = 'contiene2' + i;
          var input1_1 = document.createElement('input');
          var input1_2 = document.createElement('input');
          var label1_1 = document.createElement("label");
          var label1_2 = document.createElement("label");
          var input2 = document.createElement('input');
          var label2 = document.createElement("label");
          var select1 = document.createElement('select');
          var select2 = document.createElement('select');
          var label3 = document.createElement('label');
          var z = document.createElement("option");
          var t = document.createTextNode("SELECCIONAR");
          z.value = '0';
          z.appendChild(t);
          var z1 = document.createElement("option");
          var t1 = document.createTextNode("Clase Turista");
          z1.value = '3500';
          z1.appendChild(t1);
          var z2 = document.createElement("option");
          var t2 = document.createTextNode("Clase Ejecutiva");
          z2.value = '3800';
          z2.appendChild(t2);
          var z3 = document.createElement("option");
          var t3 = document.createTextNode("Cabina Privada");
          z3.value = '4000';
          z3.appendChild(t3);
          var z4 = document.createElement("option");
          var t4 = document.createTextNode("Cabina Privada");
          z4.value = '4000';
          z4.appendChild(t4);
          var z5 = document.createElement("option");
          var t5 = document.createTextNode("SELECCIONAR");
          z5.value = '0';
          z5.appendChild(t);
          var z6 = document.createElement("option");
          var t6 = document.createTextNode("Clase Turista");
          z6.value = '2450';
          z6.appendChild(t1);
          var z7 = document.createElement("option");
          var t7 = document.createTextNode("Clase Ejecutiva");
          z7.value = '2660';
          z7.appendChild(t2);
          var z8 = document.createElement("option");
          var t8 = document.createTextNode("Cabina Privada");
          z8.value = '2800';
          z8.appendChild(t3);
          var z9 = document.createElement("option");
          var t9 = document.createTextNode("Cabina Privada");
          z9.value = '2800';
          z9.appendChild(t4);
          label.innerText = 'Pasajero ' + i;
          input.type = "text";
          input.name = "pasajeroNombre" + i;
          input.placeholder = "Nombre completo";
          input.className = "form-control";
          label1_1.innerText = '¿Adulto Mayor? (Mayor de 60 años)'
          input1_1.type = "radio";
          input1_1.name = "seleccion" + i;
          input1_1.id = "vejestorios";
          input1_1.value = "Adulto Mayor";
          input1_1.placeholder = "Adulto Mayor";
          input1_1.className = "form-control";
          label1_2.innerText = '¿Menor de edad? (Menor de 12 años)';
          input1_2.type = "radio";
          input1_2.name = "seleccion" + i;
          input1_2.id = "escuincles";
          input1_2.value = "Menor de Edad";
          input1_2.placeholder = "Menor de edad";
          input1_2.className = "form-control";
          label2.innerText = 'Identificación ' + i;
          input2.type = "file";
          input2.name = "pasajeroID" + i;
          input2.placeholder = "Identificación"; //add a placeholder
          input2.className = "form-control"; // set the CSS class
          label3.innerText = 'Asiento ' + i;
          select1.id = "mySelect";
          select1.name = "hospedaje" + i;
          select1.className = "form-control lead";
          select2.id = "mySelect1";
          select2.name = "hospedaje" + i;
          select2.className = "form-control lead";
          results.appendChild(label);
          results.appendChild(document.createElement("br"));
          results.appendChild(input);
          results.appendChild(document.createElement("br"));
          results.appendChild(label1_1);
          results.appendChild(document.createElement("br"));
          results.appendChild(input1_1);
          results.appendChild(label1_2);
          results.appendChild(document.createElement("br"));
          results.appendChild(input1_2);
          results.appendChild(document.createElement("br"));
          results.appendChild(document.createElement("br"));
          results.appendChild(label2);
          results.appendChild(document.createElement("br"));
          results.appendChild(input2);
          results.appendChild(document.createElement("br"));
          results.appendChild(label3);                      
          results.appendChild(contenedor1).appendChild(select1).appendChild(z);                       
          results.appendChild(contenedor1).appendChild(select1).appendChild(z1);                      
          results.appendChild(contenedor1).appendChild(select1).appendChild(z2);                      
          results.appendChild(contenedor1).appendChild(select1).appendChild(z3);                       
          results.appendChild(contenedor1).appendChild(select1).appendChild(z4);                       
          results.appendChild(contenedor2).appendChild(select2).appendChild(z5);                       
          results.appendChild(contenedor2).appendChild(select2).appendChild(z6);                       
          results.appendChild(contenedor2).appendChild(select2).appendChild(z7);                       
          results.appendChild(contenedor2).appendChild(select2).appendChild(z8);                       
          results.appendChild(contenedor2).appendChild(select2).appendChild(z9);
          results.appendChild(document.createElement("hr"));
          results.appendChild(document.createElement("br"));
          results.appendChild(document.createElement("br"));
      }
  }
.contenedor1 {
  color: #000000;
  border: solid;
  padding: 1% 1% 1% 1%;
  display: none;
  }
  .contenedor2 {
  color: #000000;
  border: solid;
  padding: 1% 1% 1% 1%;
  display: none;
  }
<form action="/action_page.php" id="form">
  <div class="form-group">
    <label for="membership-members">Número de pasajeros:</label>
    <input type="number" min="0" id="membership-members" name="uFriends" 
      onchange="updateItems(this)" oninput="updateItems(this)">
  </div>
  <div id="results">
  </div>
</form>

¿Cómo puedo hacer para que dependiendo de la selección radial que haga mi usuario (adulto mayor o menor de edad) me aparezca el contenedor 1 y se esconda el contenedor 2, o en su defecto, aparezca contenedor 2 y se esconda el 1 respectivamente?


Yo había pensado algo así, pero no me sale:

 <script>
            function descuento(_this) {
                var contadorDescuento = +_this.value
                for (var i = 1; i <= contadorDescuento; i++) {
                        $(document.getElementByName('seleccion' + i)).click(function() {
                            if($(this).attr('value') == 'escuincles') {
                                    $(document.getElementById('contiene1' + i)).show();
                                    $(document.getElementById('contiene2' + i)).hide();          
                            }
                            else if($(this).attr('value') == 'vejestorios') {
                                $(document.getElementById('contiene1' + i)).hide();
                                $(document.getElementById('contiene2' + i)).show();           
                            }
                            else {
                                $(document.getElementById('contiene1' + i)).hide();
                                $(document.getElementById('contiene2' + i)).hide();   
                            }
                        });

            }
        }
        </script>
10
  • proba con pseudoelemento :checked y selectores hermanos + / ~ onda es.stackoverflow.com/a/187565/81450 Commented el 7 feb. a las 16:39
  • @aloMalbarez pero específicamente me cuesta trabajo el como referenciar los inputs, ya que no me permite agarrar por ejemplo "input type=radio && name='seleccion + i" ¿Me explico? Si no se generaran los campos basados en el input numérico no tendría problema, pero estoy batallando para llamar al elemento con nombre 'seleccion' + i; por el tema del ciclo. Commented el 7 feb. a las 17:16
  • los ocultamientos los podes hacer por class, el link del label a checkbox/radio sí, es por id, si el problema son los id dinamicos porahi tengo un par de trucos, es sólo javascript y jquery ? o esos ID se comparten con otro lenguage onda php ? ( es para ver q algo usar en la creacion y captura ) Commented el 7 feb. a las 17:36
  • @aloMalbarez esos ID de momento sólo es javascript y jquery Commented el 7 feb. a las 19:08
  • @aloMalbarez y sí, el problema que realmente tengo es que no se me ocurre cómo referenciar los id dinámicos. Commented el 8 feb. a las 1:19

2 respuestas 2

0

Necesitas atrapar el evento que selecciona el botón radial y actuar en consecuencia. Cada elemento 'input' tiene un atributo 'onchange' que contiene el valor a una función de tu código. Te transcribo un ejemplo muy simple que puede clarificar el asunto:

    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Mostrar y ocultar divs</title>
        </head>
        <body>
            <div>
                <input type="radio" id="r1" value="vr1" onchange="seleccionado(this)">
                <input type="radio" id="r2" value="vr2" onchange="seleccionado(this)">
            </div>
            <div id="contenedor1">Contenedor 1</div>
            <div id="contenedor2">Contenedor 2</div>
        </body>
        <script>
            var c1 = document.getElementById("contenedor1")
            var c2 = document.getElementById("contenedor2")
    
            // Detectar el input seleccionado por el usuario
            function seleccionado(el){
                var el_id = el.id
                if(el_id == "r1"){
                    // Oculto r2 y muestro r1
                    c1.style.visibility = 'block'
                    c2.style.visibility = 'collapse'
                    }
                else{
                    // Oculto r1 y muestro r2
                    c1.style.visibility = 'collapse'
                    c2.style.visibility = 'block'
                    }
                }
        </script>
    </html>
3
  • Te agradezco muchísimo Walter Commented el 7 feb. a las 22:46
  • La cosa es, estimado Walter, que en mi particular caso, no se me ocurre cómo referenciar o mandar llamar los id dinámicos que se generan. Commented el 8 feb. a las 1:21
  • Entiendo. Puedes obtener una lista de todos los div's actuales e iterando a través de ella así: var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ //y preguntar por el atributo 'value' por ejemplo } Commented el 9 feb. a las 1:25
0

Cada pasajero debe tener su propio contenedor, te va a facilitar la vida. Yo pondré un fieldset pero tu puedes poner el que quieras (por ejemplo un div)

Luego con un selector de hermanos ~ evalúas si el selector está checkado, entonces cambias el display del contenedor X

Básicamente lo siguiente:

.contenedor1,.contenedor2 {
  display: none;
}

.contenedor1_radio:checked ~ .contenedor1,
.contenedor2_radio:checked ~ .contenedor2{
  display:block;
}
<fieldset>
  <legend>Pasajero 1</legend>
  radio 1 <input type="radio" name="etario[0]" class="contenedor1_radio" value="viejo"> 
  radio 2 <input type="radio" name="etario[0]" class="contenedor2_radio" value="joven">
  

  <div class="contenedor1">
    contenedor1
  </div>

  <div class="contenedor2">
    contenedor2
  </div>
</fieldset>

<fieldset>
  <legend>Pasajero 2</legend>
  radio 1 <input type="radio" name="etario[1]" class="contenedor1_radio" value="viejo"> 
  radio 2 <input type="radio" name="etario[1]" class="contenedor2_radio" value="joven">
  

  <div class="contenedor1">
    contenedor1
  </div>

  <div class="contenedor2">
    contenedor2
  </div>
</fieldset>

Ojo con los name de los input !!!, cuando repites elementos debes generar un array esto se realiza agregando el sufijo [] a cada name Ejemplo:

<!--                  SIN índice  -----v           !-->
<input type="text" name="pasajeroNombre[]" placeholder="Nombre completo" class="form-control">

Pero para el especial caso de lo radio debes indicar el índice, ya que el name presenta la funcionalidad adicional de agrupar los radios

<!--             El índice  -----v           !-->
<input type="radio" name="etario[0]" class="contenedor1_radio" value="viejo"> 
2
  • Te agradezco muchísimo Yussef. Aunque el problema más grande que tengo en este particular caso es que los contenedores de generan dinámicamente y no sé cómo referenciarlos o mandarlos a llamar. ¿Me explico? Commented el 12 feb. a las 16:34
  • @JoséFranciscoValenciaLutzow Tal como te muestro en el código no necesitar referenciarlos para lograr lo que indica tu pregunta.
    – Yussef
    Commented el 13 feb. a las 13:21

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.