C贸mo crear una casilla de aceptaci贸n en un formulario por HTML y Javascript

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.

 

 

17 comentarios en 芦C贸mo crear una casilla de aceptaci贸n en un formulario por HTML y Javascript禄

  1. 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;
    };

    Responder
    • 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.

      Responder
  2. 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?

    Responder
  3. 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.

    Responder
  4. 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

    Responder
    • 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.

      Responder
  5. Ac谩 les dejo mi humilde granito de arena.
    Lo correcto es:
    onclick=”return enableSending()”

    Es decir, falt贸 agregar “return”. D铆ganme si les funcion贸.

    Responder
    • 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.

      Responder
  6. 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…

    Responder
  7. 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

    Responder
    • 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.

      Responder
  8. 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

    Responder

Deja un comentario

Resumen de nuestra Pol铆tica de Privacidad

  • Responsable:聽SmythSys IT Consulting SLNE.
  • Finalidad:聽Gestionar y moderar los comentarios.
  • Legitimaci贸n:聽Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:聽Tus datos se alojan en los servidores de OVH.
  • Derechos:聽Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcci贸n del responsable (en nuestra pol铆tica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.