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:
SanDisk Ultra Flair Memoria flash USB 3.0 de 256 GB, con carcasa de metal duradera y elegante y hasta 150 MB/s de velocidad de lectura, Negro
(4319)
Gigabyte Radeon RX 6700 XT Gaming OC 12G AMD 12 GB GDDR6
1.099,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.)
Lenovo Yoga Smart Tab - Tablet de 10.1" Full HD/IPS (Qualcomm Snapdragon 439 Octa-Core, 4 GB de RAM, 64 GB eMCP, Android 9, Wi-Fi + Bluetooth 4.2), Color Negro
(967)
Mars Gaming MCP118, Pack Iluminaciรณn RGB de Teclado, Ratรณn y Alfombrilla Gaming, USB Alรกmbrico, Negro
(3348)
HP 240 G8 - Ordenador portรกtil de 14โ FullHD (Intel Celeron 4020, 8GB RAM, 256GB SSD, Windows 10 Home) Negro - Teclado QWERTY Espaรฑol
(33)
Disco duro externo 1TB 2TB USB 3.1 para PC, Mac, ordenador de sobremesa, ordenador portรกtil, Chromebook, Xbox 360 (Black-2TB)
(142)
Tenda 4G03 WiFi Router 4G LTE 300 Mbps, Banda Inalรกmbrica de 2.4 GHz, Control Parental, Monitoreo de Trรกfico de Datos, Puerto LAN/WAN, con Ranura para Tarjeta SIM
(908)
Adaptador Micro USB a USB C Adaptador Tipo C Aluminio Duradero Garantรญa de por Vida - para Nuevo MacBook, OnePlus 2/3/5, Sony Xperia XZ, Samsung Galaxy S8/9,S8, S8+, S9, 2 Unidades๏ผNegro&Blanco๏ผ
(720)
Crucial BX500 1 TB CT1000BX500SSD1 Unidad interna de estado sรณlido, hasta 540 MB/s (3D NAND, SATA, 2.5 Pulgadas)
(58109)
AUKEY Webcam 1080P Full HD con Micrรณfono Estรฉreo, Cรกmara Web para Video Chat y Grabaciรณn, Compatible con Windows, Mac y Android (negro)
(1592)
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.
Necesitarรญa ver el cรณdigo que estรกs poniendo. Mรกndalo si puedes a info@smythsys.es (adjunta los ficheros o ponlo en un notepad) y te lo miro.
Hola David,
En primer lugar enhorabuena por tu trabajo y gracias por este tutorial.
Mi consulta es la siguiente. ยฟHay manera de dejar registro (como por ejemplo hace Contact Form 7) del consentimiento del usuario? Me refiero con un mail de consentimiento automรกtico que puedas ir almacenando en tu mail o o servidor web, o cualquier otro tipo de prueba fรญsica, mรกs allรก del hecho de que, como muy bien explicas, la casilla de “enviar” no se habilita a no ser que se marque la casilla de “He Leรญdo y Acepto”.
Supongamos el caso de un usuario que reclama asegurando que no ha pulsado ninguna casilla, ni rellenado ningรบn formulario y que te acusa de haber conseguido sus datos de forma fraudulenta. ยฟCรณmo demuestras que realmente rellenรณ el formulario y ademรกs diรณ su consentimiento?
Quedo atentรญsimo a tu respuesta ya que es un tema persintente en muchos foros sobre el tema.
Mil gracias anticipadas,
Saludos!
Antonio
Hola Antonio, en teorรญa es fรกcil. El formulario que tengas tiene que mandar un e-mail con tu correo en copia. Digo en teorรญa porque cada formulario es diferente y lleva a un sitio diferente. Algunos envรญan los resultados, otros lo mandan a un php para procesamiento…..eso depende de la programaciรณn de tu html.
Acรก les dejo mi humilde granito de arena.
Lo correcto es:
onclick=”return enableSending()”
Es decir, faltรณ agregar “return”. Dรญganme si les funcionรณ.
No es necesario poner return. Si sรณlo pones la funciรณn se ejecuta (y se pierde si da False). Si pones return si hay error devuelve false. Pero en ambos casos ejecuta la funciรณn.
Buenos dias,
he usado los codigos que proporcionas aqui en tu pรกgina web, los he copiado tal y como se ven en el video pero a la hora de pinchar la casilla de verificaciรณn, no se activa el botรณn Enviar. Se queda en disabled… Copio aquรญ los codigos:
Contact.html:
El cรณdigo estรก poco “limpio” lo siento .. Espero que me puedas ayudar…
Hola, no puedes copiar cรณdigo en la secciรณn de comentarios por motivos de seguridad.
Si quieres envรญanos los ficheros a info@smythsys.es y SI TENEMOS tiempo (no podemos asegurarlo) lo revisamos.
Un saludo,
Hola, vale gracias. Ahora os mando los ficheros.
A mi tambiรฉn me se me ha dejado de funcionar y he encontrado el motivo.
La funciรณn debe tener esta forma
function enableSending() {
document.nombre_form.nombre_etiqueta_submit.disabled = !document.nombre_form.nombre_checkbox.checked;
};
es decir probablemente todo nosotros habiamos puesto este codigo, pero el nombre que le hemos dado a nuestras etiquetas son diferentes. Especialmente en el etiqueta
Espero que os he solucionado el problema.
Un saludo
Si…la mayorรญa de la gente que no le ha funcionado es porque no ha respetado las etiquetas o no ha puesto la misma en el elemento que en la funciรณn.
Buenos dรญas, sรญ que he puesto correctos los nombres de las etiquetas pero no condigo que me funcione. El error que me sale es:
Uncaught SyntaxError: Unexpected string
formulario.html:34 Uncaught ReferenceError: habilitar is not defined
at HTMLInputElement.onclick (formulario.html:34)
A quรฉ puede deberse?. Gracias
Te estรก diciendo que en algรบn caso estรกs llamando a habilitar y no tieens definido eso.