Dentro de nuestra serie de vídeos sobre cómo crear casilla de aceptación de los términos y condiciones o la política de privacidad en un formulario web (algo obligatorio por la RGPD), hoy queremos enseñaros a hacerlo por HTML y Javascript.
Cómo crear la casilla.
Os lo explicamos en el vídeo al final del artículo. Pero básicamente es coger un formulario HTML y añadirle una casilla por HTML. Con un enlace a la página que informa sobre lo que queremos aprobar.
El botón de envío lo desactivamos (disabled) por defecto para que no pueda enviar si no es marcando la casilla.
En la casilla, añadimos una función en el evento onclick, lo que hace que se ejecute la función al marcar la casilla.
Dicha función comprobará el estado de la casilla (checked yes o no) e igualará la marca de disabled a lo contrario de dicho estado. Así que:
- Casilla marcada yes -> Disabled= no
- Casilla marcada no -> Disabled = yes
La función es:
<script type=”text/javascript”>
function enableSending() {
document.loginform.submit.disabled = !document.loginform.terms.checked;
};
</script>
Como veis es muy sencillo y podéis implementarlo a mano en cualquier web. Lo usaremos en algún otro artículo.
Os recomendamos los siguientes productos relacionados con la informática:
Rii Alfombrilla para ratón XXL Profesional (90 x 40 cm). Base Antideslizante. Especial para Gamer. Modelo Professional Gaming.
8,95 € (a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
2020 Apple MacBook Air con Chip M1 de Apple (de 13 Pulgadas, 8 GB RAM, 256 GB SSD) - Oro
979,00 € (a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
HOMESTEC Tableta Escritura LCD Color, Pizarra Digital para apuntar recordatorios Escribir o Dibujar (8,5 Pulgadas, Rosa)
13,99 € (a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
SanDisk Ultra Flair Memoria flash USB 3.0 de 64 GB, con carcasa de metal duradera y elegante y hasta 150 MB/s de velocidad de lectura, Negro
7,59 € (a partir de 23 julio, 2021 - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
SAMSUNG Galaxy Tab S6 Lite - Tablet de 10.4\" (WiFi, Procesador Exynos 9611, RAM de 4GB, Almacenamiento de 64GB, Android 10) - Color Gris [Versión española]
276,87 € (a partir de 23 julio, 2021 - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
Samsung LS34J552WQRXEN - Monitor 34" UWQHD(3440x1440, 4 ms, 75 Hz, FreeSync, LED, VA, 21:9, 3000:1, 300 CD/m², 178°, HDMI, PBP, Pip, Base en V) Negro
379,00 € (a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
Memoria USB 1TB Metal USB 3.0 a Prueba de Agua 1000GB Pen Drive Unidad Flash de Gran Memoria con Llavero para Dispositivos de PC portátil Externos
(a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
Dragon Touch Tablet para Niños con WiFi Bluetooth 7 Pulgadas 1024x600 Tablet Infantil de Android 9.0 Quad Core 2GB 16GB Doble Cámara Kid-Proof Funda Tablet Niños Educativo Y88X Pro Rosa
79,99 € (a partir de n/a - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
HUAWEI Eye Comfort AD80 - Monitor de 23,8" FullHD (1920x1080, IPS anti reflejos, 16:9, 250 nits, 60Hz, HDMI, VGA, marcos estrechos), Color Negro
109,00 € (a partir de 23 julio, 2021 - Más informaciónLos precios y la disponibilidad de los productos son exactos a partir de la fecha/hora indicada y están sujetos a cambios. Cualquier información de precio y disponibilidad que se muestre en [los sitios de Amazon relevantes), según corresponda] en el momento de la compra se aplicará a la compra de este producto.)
Genial el artículo porque nos viene fenómeno a los que tenemos webs muy antiguas, pero no soy capaz de hacer funcionar el java.
He tenido cuidado de ponerlo dentro del HEAD y ver el nombre del botón, pero hay manera.
Sabes que puede ser?
function enableSending() {
document.loginform.submit.disabled = !document.loginform.terms.checked;
};
Se pueden ver los errores de Java con el insepctor de Google en la pestaña Console. Lo mejor es que vayas paso a paso. Primero ver si se cumple el onclick (es decir que si pincha en la casilla se ejecuta la función). Comenta la línea document.loginforom…. y pon document.write(‘Hola’) Si te escribe Hola en la pantalla está bien la llamada a la función y el error es en la siguiente línea. Si no, el error está en la llamada.
Gracias por tu respuesta, efectivamente en la pestaña de consola sale el siguiente error al pinchar sobre el checkbox:
Uncaught SyntaxError: Invalid or unexpected token
pero sin embrago la línea está bien escrita:
A que puede ser debido?
Necesitaría ver el código. Parece una tontería, una etiqueta mal puesta.
Efectivamente es de la llamada, si elimino onclick, no da el error.
Pero no tengo ni idea de como solucionarlo, me puedes dar alguna pista.
Gracias.