Limpiar un input con jQuery 2 ejemplos

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.

Índice

    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.

    Relacionado  Pasar el valor de un input a otro input con jQuery

    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.

    Relacionado  Refresh reload contenido DIV usando jQuery [Completo]
    Relacionado  Validar contraseña segura jQuery: 3 ejemplos completos

    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!.

    Entradas Relacionadas

    Deja una respuesta

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

    Subir