jquery comment vider le champ de saisie

199

Je suis dans une application mobile et j'utilise un champ de saisie pour que l'utilisateur soumette un numéro.

Lorsque je reviens en arrière et reviens à la page, ce champ de saisie présente la dernière entrée de numéro affichée dans le champ de saisie.

Existe-t-il un moyen d'effacer le champ à chaque chargement de la page?

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

Réponses:

418

Vous pouvez effacer le champ de saisie en utilisant $('#shares').val('');

shaunsantacruz
la source
2
Est-ce que cela fonctionne et est-ce conforme aux spécifications si nous avons une entrée numérique comme ça <input type="number" min="0' max="10" value="5"></input>? Je suppose que dit différemment, êtes-vous autorisé à définir une entrée numérique pour qu'elle soit vide?
Kevin Wheeler
3
Et alors .val([])?
Fr0zenFyr
3
Sur une note connexe, vous .val([])pouvez également désélectionner toute option sélectionnée dans la liste de sélection ... pas tellement avec .val(''). La meilleure chose à ce sujet est son support multi-navigateur. PS: Ceci est une alternative à seulement une autre solution multi-navigateur efficace - $("select option").prop("selected", false);mais fonctionne avec toutes les entrées. Merci à Jon pour un test qu'il a créé .
Fr0zenFyr
29 
$(document).ready(function(){
  $('#shares').val('');
});
osahyoun
la source
10

Lors de la soumission du formulaire, utilisez la méthode de réinitialisation sur le formulaire. La méthode reset () réinitialise les valeurs de tous les éléments d'un formulaire.

$('#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>
Développer l'extrait

Radhika
la source
Peut aider quelqu'un mais dans ce contexte, votre réponse est inutile.
Marco Concas
8

Le réglage val('')vide le champ de saisie. Vous utiliseriez donc ceci:

Effacez le champ de saisie lors du chargement de la page:

$(function(){
    $('#shares').val('');
});
Francis Lewis
la source
4

Puisque vous utilisez jQuery, que diriez-vous d'utiliser un déclencheur- réinitialisation :

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

Pour réinitialiser le texte, le nombre, la recherche, les entrées de zone de texte:

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

Pour réinitialiser, sélectionnez:

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

Pour réinitialiser l'entrée radio:

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

Pour réinitialiser l'entrée de fichier:

$("#file-input").val(null);
poulets
la source
0

si vous appuyez sur le bouton "retour", il a généralement tendance à coller, ce que vous pouvez faire, c'est lorsque le formulaire est soumis, effacer l'élément, puis avant de passer à la page suivante, mais après avoir fait avec l'élément ce que vous devez.

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