2

Estoy tratando de cargar las option de un select al presionar un botón.

El código funciona si dichas etiquetas no están contenidas dentro de un form; en caso contrario, los datos se cargan pero instantáneamente vuelven a desaparecer:

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function ()
        {
            var selectElement = document.getElementsByTagName("select")[0];
            var boton = document.getElementsByTagName("button")[0];

            boton.onclick = function ()
            {       
                selectElement.innerHTML = "";

                for (var i = 1; i <= 31; ++i)
                    selectElement.innerHTML += ("<option>" + i + "</option>");
            }
        }
    </script>
</head>
<body>
    <form>
        <select name="numeros"></select>
        <br/>
        <button>Cargar</button>
    </form>
</body>
</html>

¿A qué se debe este comportamiento?

¿Cómo puedo corregirlo?

Muchísimas gracias.

1
  • el name no es 'select' es 'numeros'
    – Srsole
    Commented el 5 nov. 2020 a las 16:24

2 respuestas 2

2

La función es correcta. Lo que te está sucediendo es un error muy común y surge a causa de desconocer que un <button> que no tiene definido un atributo type por defecto es tratado como un type="submit". Esto ocasiona que se lance una llamada GET al enviarse el formulario y como el <form> no tiene un atributo action definido se envía a la misma página donde te encuentras, provocando que se recargue y se te vuelva a quedar vacío el <select>

Forzando el tipo del botón para que sea type="button" controlarás el problema.

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function ()
        {
            var selectElement = document.getElementsByTagName("select")[0];
            var boton = document.getElementsByTagName("button")[0];

            boton.onclick = function ()
            {       
                selectElement.innerHTML = "";

                for (var i = 1; i <= 31; ++i)
                    selectElement.innerHTML += ("<option>" + i + "</option>");
            }
        }
    </script>
</head>
<body>
    <form>
        <select name="numeros"></select>
        <br/>
        <button type="button">Cargar</button>
    </form>
</body>
</html>

1

Como menciona @phpMyGuel, al ser un formulario, este envía un get a la misma página con los datos contenidos en el formulario, también se puede evitar agregando el atributo onsubmit al formulario

<form onsubmit="javascript:void(0)">
</form>

Saludos.

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.