jquery cómo vaciar el campo de entrada

199

Estoy en una aplicación móvil y uso un campo de entrada para que el usuario envíe un número.

Cuando regreso y regreso a la página, ese campo de entrada presenta la última entrada numérica que se muestra en el campo de entrada.

¿Hay alguna forma de borrar el campo cada vez que se carga la página?

$('#shares').keyup(function(){
    payment = 0;
    calcTotal();
    gtotal = ($('#shares').val() * 1) + payment;
    gtotal = gtotal.toFixed(2);
    $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});

— kosbou
fuente

418

Puede borrar el campo de entrada utilizando $('#shares').val('');

— shaunsantacruz
fuente

2

¿Funciona y cumple con las especificaciones si tenemos una entrada numérica como esta <input type="number" min="0' max="10" value="5"></input>? Supongo que dicho de otra manera, ¿puedes establecer una entrada numérica en blanco?

— Kevin Wheeler

3

¿Qué tal .val([])?

— Fr0zenFyr

3

En una nota relacionada, .val([])también puede anular la selección de cualquier opción seleccionada en la lista de selección ... no tanto con .val(''). Lo mejor de todo es que es compatible con varios navegadores. PD: Esta es una alternativa a solo otra solución eficiente de navegador cruzado, $("select option").prop("selected", false);pero funciona con todas las entradas. Gracias a Jon por una prueba que creó .

— Fr0zenFyr

29

$(document).ready(function(){
  $('#shares').val('');
});

— osahyoun
fuente

10

Al enviar el formulario, use el método de reinicio en el formulario. El método reset () restablece los valores de todos los elementos en un formulario.

$('#form-id')[0].reset();

OR 

document.getElementById("form-id").reset();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

$("#submit-button").on("click", function(){
       //code here
       $('#form-id')[0].reset();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form-id">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input id="submit-button" type="submit" value="Submit">
</form> 
</body>
</html>

Expandir fragmento

— Radhika
fuente

Puede ayudar a alguien, pero en este contexto su respuesta es inútil.

— Marco Concas

8

Ajuste val('') vaciará el campo de entrada. Entonces usarías esto:

Borre el campo de entrada cuando se carga la página:

$(function(){
    $('#shares').val('');
});

— Francis Lewis
fuente

4

Como está utilizando jQuery, ¿qué tal si utiliza un reset de gatillo ?

$(document).ready(function(){
  $('#shares').trigger(':reset');
});

— Sablefoste
fuente

3

Para restablecer entradas de texto, número, búsqueda, área de texto:

$('#shares').val('');

Para restablecer, seleccione:

$('#select-box').prop('selectedIndex',0);

Para restablecer la entrada de radio:

$('#radio-input').attr('checked',false);

Para restablecer la entrada del archivo:

$("#file-input").val(null);

— pollos
fuente

0

Si presiona el botón "Atrás", generalmente tiende a pegarse, lo que puede hacer es que cuando se envíe el formulario, borre el elemento y luego antes de pasar a la página siguiente, pero después de hacer con el elemento lo que necesita.

    $('#shares').keyup(function(){
                payment = 0;
                calcTotal();
                gtotal = ($('#shares').val() * 1) + payment;
                gtotal = gtotal.toFixed(2);
                $('#shares').val('');
                $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
            });

— Chris
fuente