Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto, solo debemos de seguir estos pasos que detallaremos a continuación.

Pasos para enviar formulario con checkbox

  • Crear un formulario con un checkbox
  • Agregar atributo Onchange en input tipo checkbox
  • En el atributo Onchange agregar  this.form.submit()

Tu HTML debería verse así:

<input onChange="this.form.submit()" ... />
Enviar formulario usando checkbox
Enviar formulario usando checkbox

a) JavaScript: Enviar formulario usando checkbox

JavaScript es el más sencillo de hacer este proceso, solo debemos de agregar un atributo a nuestra casilla y ya tenemos la opción implementada.

Añadiendo lo siguiente

onchange="document.getElementById('formName').submit()"

a cada casilla de verificación, deberá enviar cada vez que se cambie una casilla de verificación.

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<input type ="checkbox" name="cBox[]" value = "3" onchange="document.getElementById('formName').submit()">3</input>
<input type ="checkbox" name="cBox[]" value = "4" onchange="document.getElementById('formName').submit()">4</input>
<input type ="checkbox" name="cBox[]" value = "5" onchange="document.getElementById('formName').submit()">5</input>
<input type="submit" name="submit" value="Search" />
</form>

b) Usando checkbox con jQuery

Otra alternativa es el uso de la biblioteca jQuery, es aún más fácil y discreto para realizar los procesos.

$(document).ready(function(){
$("#formname").on("change", "input:checkbox", function(){
$("#formname").submit();
});
});

Para cualquier número de casillas de verificación en su formulario, cuando ocurre el evento de «change«, se envía el formulario. Esto funcionará incluso si crea dinámicamente más casillas de verificación gracias al método .on().

Conclusión

En este articulo hemos aprendido a enviar un formulario HTML usando una casilla de verificación. Sin embargo, este método también funciona con las etiquetas de tipo SELECT.

Hemos aprendido a implementar el atributo llamado ONCHANGE a nuestras etiquetas de formulario para darle la opción en enviar formularios.

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Array dentro de ciclo Foreach PHP

Array dentro de ciclo Foreach PHP: ejemplo completo

Array dentro de ciclo Foreach PHP. A veces se requiere validar si existe un elemento de un ARRAY dentro de un ciclo While o ciclo foreach en…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *