Effacer les champs de formulaire avec jQuery

Pour jQuery 1.6+:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

Pour jQuery < 1.6:

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

Veuillez voir ce post:
La réinitialisation d'un multi-étape de formulaire avec jQuery

Ou

$('#myform')[0].reset();

Que jQuery suggère:

De récupérer et de changer DOM des propriétés telles que la checked, selected, ou disabled état des éléments de forme, utilisez les .prop() méthode.

Cela ne peut pas gérer les cas où la forme des champs de saisie ont non vide des valeurs par défaut.

Quelque chose comme devrait fonctionner

$('yourdiv').find('form')[0].reset();

Simple, mais fonctionne comme un charme.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

$('form[name="myform"]')[0].reset();

J'ai eu plus facile astuce pour réinitialiser le formulaire

jQuery("#review-form")[0].reset();

ou

$("#review-form").get().reset();

Avec Javascript, vous pouvez le faire simplement avec cette syntaxe getElementById("your-form-id").reset();

vous pouvez également utiliser jquery par l'appel de la fonction de réinitialisation de cette façon $('#your-form-id')[0].reset();

Rappelez-vous de ne pas oublier [0]. Vous obtiendrez l'erreur suivante si

TypeError: $(...).la réinitialisation n'est pas une fonction

JQuery fournit également un événement vous pouvez utiliser

$('#form_id').déclencheur("reset");

J'ai essayé et ça fonctionne.

Remarque: il est important de remarquer que ces méthodes n'réinitialiser votre formulaire à leur valeur initiale définie par le serveur au chargement de la page. Cela signifie que si votre entrée est réglé sur la valeur "valeur de consigne" avant que vous avez fait un changement aléatoire, le champ sera remis à la même valeur après la réinitialisation de la méthode est appelée.

Espère que cela aide

Pourquoi ne pas utiliser document.getElementById("myId").reset(); ? c'est simple et assez

Plus facile et la meilleure solution est-

$("#form")[0].reset();

N'utilisez pas ici -

$(this)[0].reset();

J'utilise ceci :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

Et voici mon bouton:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID est l'identification de la forme

2. OnSuccess de l'opération que nous appelons la fonction JavaScript avec le nom "ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. si vous le faites à la fois de ces droits, alors vous ne serez pas en mesure d'arrêter de travailler...

le code que je vois ici et sur d'autres AINSI en question semble incomplète.

De la réinitialisation d'un formulaire de réglage, les valeurs d'origine de l'HTML, donc j'ai mis cela ensemble pour un petit projet que je faisais basé sur le code ci-dessus:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

S'il vous plaît laissez-moi savoir si je suis absent quelque chose ou que quelque chose peut être amélioré.

J'ai écrit un universel plugin jQuery:

JS:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        //Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        //Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    //Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
<input type="text" value="default"/><br /><br />
Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
Ch 2 <input type="checkbox" name="color" value="2" /><br />
Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
<select name="time"><br />
<option value="15">15</option>
<option selected="selected" value="30">30</option>
<option value="45">45</option>
</select><br /><br />
R 1 <input type="radio" name="color" value="1" /><br />
R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
R 3 <input type="radio" name="color" value="3" /><br /><br />
<textarea>Default text</textarea><br /><br />
<p>Play with form values and then try to reset them</p>
<button type="button" value="text">Reset text input</button>
<button type="button" value="checkbox">Reset checkboxes</button>
<button type="button" value="select">Reset select</button>
<button type="button" value="radio">Reset radios</button>
<button type="button" value="textarea">Reset textarea</button>
<button type="button" value="form">Reset the Form</button>
</form>

Certains d'entre vous se plaignent que les radios et tels sont effacées de défaut "à vérifier" l'état... Tout ce que vous avez à faire est d'ajouter :radio, case sélecteurs .pas et le problème est résolu.

Si vous ne pouvez pas obtenir toutes les autres fonctions de réinitialisation de travailler, ce qui.

• Adapté de ngen la réponse de

  function form_reset(formID){
  $(':input','#'+formID)
  .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
  .val('');
  }

$('form').submit(function() {

var el = $(this);
$('<button type="reset" style="display:none; "></button>')
.appendTo(el)
.click()
.remove()
;
return false;

});