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