Realizando la revisión de lo que tienes, ciertamente hay 2 cosas que se detectan.
Para entender un poco el comportamiento del formulario con la etiqueta form, observemos lo siguiente:
- El atributo onSubmit permite asociar una función de test en el formulario. Si la función retorna falso, los datos del formulario no se envían, quedan en la página.
- El atributo name permite a un script acceder a su contenido. Es preferible utilizar los dos atributos con el mismo identificador, por motivos de compatibilidad, es decir el atributo name y el atributo id llamen igual.
- El atributo action indica la página a la que se envían los datos del formulario. Si este atributo está vacío, es la página que contiene el formulario la que se recargará con los datos como parámetros.
Teniendo en cuenta estos puntos, lo que hacemos es que al ejecutar el onSubmit le agregamos el
preventDefault
para cancelar el evento, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevoDejo enlaces de apoyo: https://www.um.es/docencia/barzana/DAWEB/Formularios-HTML5.html https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault
analizando el código, se observa que al ejecutarse el evento change en el checkbox, haces una validación sobre una variable que tiene un scope global, llamado
this.checked
. esta, puede que cuando le llamas en este flujo su valor sea undefined y nunca logre cumplir con lo requerido. Te comparto una forma mejor de como puedes obtener la info que necesitas:let freePass = false; // Inicializamos la variable en false, checkbox.addEventListener('change', (e) => { freePass = e.target.checked; // almacenamos el checked del input a la variable global freePass });
Comparto el código funcional.
// Creamos un DOM element (Aquí no hay problema).
const response = document.querySelector('#response');
const responseParagraph = document.createElement('p');
response.appendChild(responseParagraph);
// Anexamos el preventDefault
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
});
// Recogemos el valor del checkbox (Aparentemente aquí se encuentra el problema).
let checkbox = document.querySelector('#checkbox');
let freePass = false; // Inicializamos la variable en false,
checkbox.addEventListener('change', (e) => {
freePass = e.target.checked; // almacenamos el checked del input a la variable global freePass
});
// Evaluamos las condiciones.
let validarPermiso = () => {
let clientAge = document.getElementById('clientAge').value;
if (clientAge >= 18 && clientAge < 70) {
if (freePass) {
responseParagraph.innerHTML = 'Adelante, disfrutá gratis de la fiesta.';
} else {
responseParagraph.innerHTML = 'Adelante, pagá la entrada y disfrutá de la fiesta.';
}
} else {
responseParagraph.innerHTML = 'Lo siento, no podés pasar.';
}
}
<h3>Validación de entrada</h3>
<form name="form" id="form" onsubmit="validarPermiso()">
<input type="number" id="clientAge" placeholder="Ingresa tu edad.">
<label for="checkbox"><input type="checkbox" id="checkbox">¿Tenés tu pase?</label>
<input type="submit" value="Confirmar" />
</form>
<div id="response"></div>
<!-- Aquí se imprimirá la respuesta. -->
Espero te sirva. Saludos,