JavaScript

Limpiar un input con jQuery 2 ejemplos

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba