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>");
});

Réponses:


418

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


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('');
});

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>


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('');
});

4

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

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

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);

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>");
            });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.