9 votes

Bouton de réinitialisation de formulaire jQuery pour toutes les valeurs saisies

J'utilise un formulaire et un bouton de réinitialisation où je peux réinitialiser toutes les valeurs saisies, mais cela ne fonctionne pas du tout.

Lorsque j'ai débogué avec l'onglet console de Firefox, j'ai vu une erreur illegal character à la fin du script de jQuery. Quelqu'un peut-il me dire ce qui ne va pas ici ?

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery1.7.2.js"></script>
</head>
<body>
  <script type="text/javascript">
    jQuery('#reset').click(function(){
        $(':input','#myform')
        .not(':button, :submit, :reset, :hidden')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
    });
</script>
<form id='myform'>
  <input type='text' value='test' />
    <select>
      <option>One</option>
      <option selected="true">Two</option>
    </select>
    <select multiple="true" size="5">
      <option>One</option>
      <option selected="true">Two</option>
    </select>
    <input type='button' id='reset' value='reset' />
</form>
</body>
</html>

13voto

Robin Maben Points 8480

Le <input type="reset" > suffisent ?

<form>

   <input type='reset'  />

</form>

DEMO

12voto

sQVe Points 1957

Essayez ce qui suit :

$(function() {
    $('#reset').click(function() {
        $(':input','#myform')
            .not(':button, :submit, :reset, :hidden')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
    });
});

Vous exécutez le javascript avant que le DOM ne soit prêt. $(function() {}) ne s'exécute que lorsque le DOM est prêt. Plus d'informations ici : .ready()

8voto

Ilia Rostovtsev Points 3395

L'autre solution jQuery pour réinitialiser les champs du formulaire serait :

$('#form')[0].reset(); or $('#form').get(0).reset();

Un autre, plus spécifique, se réfère aux champs obligatoires :

$('#form').find('input, select').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

Démonstration en direct de jsFiddle - Solution jQuery

En utilisant uniquement JavaScript :

document.getElementById('form').reset();

En utilisant uniquement du HTML :

Comme cela a été mentionné dans l'une des réponses, dans la plupart des cas, vous n'avez pas besoin de JavaScript pour réinitialiser les champs du formulaire. type="reset" au bouton, par exemple :

<button type="reset" value="Reset">Reset</button>

0voto

Lewis G Points 1

Le code JQuery ci-dessous réinitialise tous les textes et toutes les listes déroulantes ;

Il suffit de remplacer le #VotreID avec l'ID du champ/de l'entrée que vous souhaitez réinitialiser, pour des entrées multiples, dupliquez les lignes et ajoutez les ID là où c'est approprié.

$(".btn-reset").click(function () { 
    $(this).closest('form').find("input[type=text], textarea").val(""); 
    $('#YourID').removeAttr('selected').find('option:eq(0)').prop('selected', true); 
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X