jquery como esvaziar o campo de entrada

199

Estou em um aplicativo móvel e uso um campo de entrada para que o usuário envie um número.

Quando eu voltar e voltar à página em que o campo de entrada apresenta a última entrada de número exibida no campo de entrada.

Existe alguma maneira de limpar o campo toda vez que a página é carregada?

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

— Kosbou
fonte

418

Você pode limpar o campo de entrada usando $('#shares').val('');

— shaunsantacruz
fonte

2

Isso funciona e é compatível com as especificações se tivermos uma entrada numérica como essa <input type="number" min="0' max="10" value="5"></input>? Acho que, dito de forma diferente, você pode definir uma entrada numérica para ficar em branco?

— Kevin Wheeler

3

Que tal .val([])?

— precisa saber é o seguinte

3

Em uma nota relacionada, .val([])também é possível desmarcar qualquer opção selecionada na lista de seleção ... nem tanto .val(''). A melhor coisa é o suporte a vários navegadores. PS: Essa é uma alternativa a apenas outra solução eficiente entre navegadores - $("select option").prop("selected", false);mas funciona com todas as entradas. Graças a Jon por um teste que ele criou .

— precisa saber é o seguinte

29

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

— osahyoun
fonte

10

Ao enviar o formulário, use o método de redefinição no formulário. O método reset () redefine os valores de todos os elementos em um formulário.

$('#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 snippet

— Radhika
fonte

Pode ajudar alguém, mas neste contexto sua resposta é inútil.

— Marco Concas

8

A configuração val('')esvaziará o campo de entrada. Então você usaria isso:

Limpe o campo de entrada quando a página carregar:

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

— Francis Lewis
fonte

4

Como você está usando o jQuery, que tal usar um reset de gatilho :

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

— Sablefoste
fonte

3

Para redefinir as entradas de texto, número, pesquisa e área de texto:

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

Para redefinir, selecione:

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

Para redefinir a entrada de rádio:

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

Para redefinir a entrada do arquivo:

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

— galinhas
fonte

0

se você pressionar o botão "voltar", normalmente ele tende a ficar preso, o que você pode fazer é quando o formulário é enviado, limpar o elemento e, em seguida, antes de ir para a página seguinte, mas depois de fazer com o elemento o que você precisa.

    $('#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
fonte