jquery come svuotare il campo di input

199

Sono in un'app mobile e utilizzo un campo di input per inviare un numero all'utente.

Quando torno indietro e torno alla pagina quel campo di input presenta l'ultimo input numerico visualizzato nel campo di input.

C'è un modo per cancellare il campo ogni volta che la pagina viene caricata?

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

È possibile cancellare il campo di input utilizzando $('#shares').val('');

— shaunsantacruz
fonte

2

Funziona così ed è conforme alle specifiche se abbiamo un input numerico simile <input type="number" min="0' max="10" value="5"></input>? Immagino che sia stato detto diversamente, ti è permesso impostare un input numerico su vuoto?

— Kevin Wheeler,

3

Che ne dici .val([])?

— Fr0zenFyr,

3

In una nota correlata, .val([])puoi anche deselezionare qualsiasi opzione selezionata nell'elenco di selezione ... non tanto con .val(''). La cosa migliore è il supporto cross-browser. PS: questa è un'alternativa solo ad altre efficienti soluzioni cross-browser, $("select option").prop("selected", false);ma funziona con tutti gli input. Grazie a Jon per un test che ha creato .

— Fr0zenFyr,

29

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

— osahyoun
fonte

10

Durante l'invio del modulo utilizzare il metodo di ripristino sul modulo. Il metodo reset () reimposta i valori di tutti gli elementi in un modulo.

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

Espandi frammento

— Radhika
fonte

Può aiutare qualcuno ma in questo contesto la tua risposta è inutile.

— Marco Concas,

8

L'impostazione val('')svuota il campo di input. Quindi useresti questo:

Cancella il campo di input quando la pagina viene caricata:

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

— Francis Lewis
fonte

4

Dato che stai usando jQuery, che ne dici di usare un trigger- reset :

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

— Sablefoste
fonte

3

Per ripristinare gli input di testo, numero, ricerca, textarea:

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

Per ripristinare selezionare:

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

Per ripristinare l'ingresso radio:

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

Per ripristinare l'input del file:

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

— polli
fonte

0

se si preme il pulsante "indietro" di solito tende ad attaccarsi, ciò che si può fare è quando il modulo viene inviato cancellare l'elemento, quindi prima di passare alla pagina successiva, ma dopo aver fatto con l'elemento ciò che è necessario.

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