Limpiar un input con jQuery 2 ejemplos. Aprenderemos a cómo aplicar jQuery para limpiar las etiquetas de formulario con jQuery.
En este ejemplo vamos a ver cómo limpiar un input con jQuery. Además, es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente desde una cdn.
Limpiar un input con jQuery
Primeramente, hay que definir un botón y un input con un valor, ¡en este caso el valor va a ser “Hola Mundo!” para este ejemplo. Además, el elemento de tipo «button» debe de tener una ID llamado «limpiar«. para que jQuery pueda trabajar.
<input type="text" value="Hola Mundo!">
<button id="limpiar">Limpiar</button>La variable de limpiar es el siguiente
$("#limpiar").val("");Button HTML
El botón HTML al ser presionado va a limpiar el input, para esto vamos a utilizar el evento click y la función val.
$(document).ready(function() {
$('#limpiar').click(function() {
$('input[type="text"]').val('');
});
});Limpiar múltiple input
Si al ejemplo le agregamos varios inputs más, al oprimir el botón se limpiarían todos ya que se ha especificado eso en el evento clic. Para especificar que input se desea limpiar se le pueden agregar un id o una clase, a continuación, el ejemplo completo.
<!DOCTYPE html>
<html>
<head>
<title>Limpiar input con jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input class="hola-mundo-input" type="text" value="Hola Mundo!">
<button id="limpiar">Limpiar</button>
<script type="text/javascript">
$(document).ready(function() {
$('#limpiar').click(function() {
$('.hola-mundo-input').val('');
});
});
</script>
</body>
</html>Limpiar un input con jQuery 2 ejemplos
Con JavaScript se pueden limpiar de manera dinámica sin necesidad de recargar el navegador.
Limpiar un input con Java Script
Para limpiar directamente el input con JavaScript podemos usar la siguiente línea de código invocando a la ID a limpiar con el valor vacío.
document.getElementById("limpiar").value="";Limpiar múltiples INPUT con JavaScript
Si tienes varios inputs de tipo text puedes usar la funcionalidad each() de jQuery, lo que te permite capturar todos los elementos que tengan ese atributo y aplicarle una retrollamada para cambiar su comportamiento, así como se muestra en el siguiente snippet.
$(function() {
if(! $('input[type=checkbox]').is(':checked')){
$('input[type=text]').each(function () {
$(this).attr('disabled', true)
})
}
//Capturamos el evento que nos interesa
$('input[type=checkbox]').click(function () {
//Evalúamos el valor que puede obtener
if($(this).is(':checked')) {
//Escogemos a todos los inputs tipo Text
$('input[type=text]').each(function () {
//Aplicamos el cambio de atributo para cada each del loop
$(this).attr('disabled', false)
})
} else {
//Aplicamos el sentido contrario y limpiamos los inputs
$('input[type=text]').each(function () {
$(this).attr('disabled', true)
$(this).val('')
})
}
});
});Código HTML
Podemos crear un simple formulario o solamente elementos de formulario para poder limpiar, veamos un ejemplo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="checkbox">
<input id="1" type="text" placeholder="Input 1">
<input id="2" type="text" placeholder="Input 2">
</div>Conclusión
En este articulo hemos aprendido a limpiar elementos de formulario (INPUT) desde jQuery y/o JavaScript. Sin embargo, si desea eliminar múltiples campos puedes optar por hacer el llamado a la clase css desde jQuery o el tipo del elemento múltiple que se desea limpiar.
Espero que esta explicación les ayude en sus proyectos web.
