Inicio » Codigos » Enviar formulario usando checkbox

Enviar formulario usando checkbox

baulcode junio 1, 2022 82 0

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

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.