0

estoy realizando un código en el que dentro de un formulario hay una lista de opciones dentro de un select, las cuales al momento de ser seleccionadas y enviado el formulario, este debe mostrar una petición a realizar, esto debe ser mostrado en un document.write.

dentro del código he colocado un if como referencia a la idea que se pretende cuando se selecciona una opción dentro del formulario.

Tengo este código hasta el momento.

<form action="#" method="post" id="formulario">
    <p>Nombre: <input type="text" name="nombre" size="40" id="nombre"></p>
    <p>Edad: <input type="text" name="edad" size="40" id="edad"></p>
    <p>Ciudad: <input type="text" name="ciudad" size="40" id="ciudad"></p>
    <label for="pecado">Seleciona un pecado digital:</label>

    <select name="pecados" id="pecado">
        <option selected="true" disabled="disabled">Seleccione un pecado...</option>
    </select>

    <input type="submit" value="Enviar">
</form>


<script>

        var el_pecado = [
            "Copy/paste sin leer",
            "Hackear la cuenta del pololo/a",
            "Crackear software propietrio",
            "Crackear software propietrio",
            "Formatear sin respaldar"
        ];

        el_pecado.sort(); 
        
        function addOptions() {

           
            var prop; 
            for (prop in el_pecado) {
               var select = document.getElementsByName("pecados")[0];
               var option = document.createElement("option");
               option.text = el_pecado[prop];
               option.setAttribute('value', [[prop]]);
               select.add(option);
               console.log(option);
            }

            // es un ejemplo //

            if(prop == 0){
                  console.log("tu penitencia es ir a la luna");
            }
            if(prop == 0){
                  console.log("tu penitencia es ir al cerro");
            }
            if(prop == 0){
                  console.log("tu penitencia es ir al espacio");
            }
            if(prop == 0){
                  console.log("tu penitencia es ir a al carajo");
            }
               


        }
        addOptions();

</script>

1 respuesta 1

0

Añade un evento de cambio.

const el_pecado = [
    "Copy/paste sin leer",
    "Hackear la cuenta del pololo/a",
    "Crackear software propietrio",
    "Crackear software propietrio",
    "Formatear sin respaldar"
];

window.addEventListener('DOMContentLoaded', function(){
    // Aquí cuando carga el formulario
    // el_pecado.sort();  Si necesitas ordenar....
    // Tu código
    //    let prop; 
        for (prop in el_pecado) {
           //var select = document.getElementsByName("pecados")[0];

           const option = document.createElement("option");
           option.text = el_pecado[prop];
           option.setAttribute('value', [[prop]]);
           console.log(option);

           //select.add(option);
           pecado.add(option)
        }

})

pecado.addEventListener('change', function(){
   // Aquí cada vez que cambia su valor.
})

Estoy intentando entender que cargas las opciones dinámicamente, bueno, eso pasa en DOMContentLoaded. Luego, agregamos el evento change, para detectar cambios en el formulario.

Tengo la duda de por qué iteras tu propio array de esa forma para obtener la opción seleccionada, cuando podrías hacer algo como esto:

const selected = el_pecado[pecado.value];

Sobre, por qué uso 'pecado' directamente, los identificadores están disponibles una vez declarados. id="pecado" // console.log(pecado).

2
  • Lo que no entendi , es que si los if van dentro de ese addEventListener o otro tipo de codigo cuando cambia el valor.
    – GhostCoder
    Commented el 3 oct. 2020 a las 23:42
  • Sí, dentro del change tienes que obtener el valor, y hacer el if correspondiente. Ahí te mostré cómo encontrar el valor seleccinado. Commented el 3 oct. 2020 a las 23:57

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.