Löschen Sie Formularfelder mit jQuery

Für jQuery 1.6+:

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

Für jQuery <1.6:

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

Siehe diesen Beitrag: Zurücksetzen eines mehrstufigen Formulars mit jQuery

Oder

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

Wie jQuery vorschlägt :

Verwenden Sie die Methode .prop () , um DOM-Eigenschaften wie checked, selected oder disabled von Formularelementen abzurufen und zu ändern.

Warum sollte das nicht verwendet werden?

$("#form").trigger('reset');

Dies behandelt keine Fälle, in denen Formulareingabefelder nicht leere Standardwerte haben.

So etwas sollte funktionieren

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

wenn Sie Selektoren verwenden und Werte für leere Werte festlegen, wird das Formular nicht zurückgesetzt, sondern alle Felder werden leer. Das Zurücksetzen dient dazu, das Formular so zu machen, wie es vor den Bearbeitungsaktionen des Benutzers war, nachdem das Formular vom Server geladen wurde. Wenn eine Eingabe mit dem Namen "Benutzername" vorhanden ist und dieser Benutzername auf der Serverseite ausgefüllt wurde, löschen die meisten Lösungen auf dieser Seite diesen Wert aus der Eingabe und setzen ihn nicht auf den Wert zurück, der vor den Änderungen des Benutzers war. Wenn Sie das Formular zurücksetzen müssen, verwenden Sie Folgendes:

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

wenn Sie das Formular nicht zurücksetzen müssen, sondern alle Eingaben mit einem Wert füllen, z. B. mit einem leeren Wert, können Sie die meisten Lösungen aus anderen Kommentaren verwenden.

Einfach aber wirkt wie ein Zauber.

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

Wenn noch jemand diesen Thread liest, ist hier die einfachste Lösung, die nicht jQuery, sondern einfaches JavaScript verwendet. Wenn sich Ihre Eingabefelder in einem Formular befinden, gibt es einen einfachen JavaScript-Befehl zum Zurücksetzen:

document.getElementById("myform").reset();

Mehr dazu hier: http://www.w3schools.com/jsref/met_form_reset.asp

Prost!

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

Warum muss es überhaupt mit JavaScript gemacht werden?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

Das erste Mal versucht, Felder mit Standardwerten nicht zu löschen.

Hier ist eine Möglichkeit, dies mit jQuery zu tun:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

Wenn Sie alle Eingabefelder unabhängig von ihrem Typ leeren möchten, ist dies eine Minute für Schritt 

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

Ich habe den einfachsten Trick, um die Form zurückzusetzen

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

oder 

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

Mit Javascript können Sie dies einfach mit dieser Syntax tun getElementById("your-form-id").reset();

sie können auch jquery verwenden, indem Sie die reset-Funktion auf diese Weise aufrufen. $('#your-form-id')[0].reset();

Vergessen Sie nicht, [0] zu vergessen. Sie erhalten die folgende Fehlermeldung, wenn 

TypeError: $ (...). Reset ist keine Funktion

JQuery bietet auch ein Ereignis, das Sie verwenden können

$ ('# form_id'). trigger ("reset");

Ich habe es versucht und es funktioniert.

Hinweis: Es ist wichtig zu wissen, dass diese Methoden Ihr Formular nur auf den ursprünglichen Wert zurücksetzen, den der Server beim Laden der Seite festgelegt hat. Das heißt, wenn Ihre Eingabe vor der zufälligen Änderung auf den Wert 'set value' gesetzt wurde, wird das Feld nach Aufruf der reset-Methode auf denselben Wert zurückgesetzt.

Ich hoffe es hilft

$('#editPOIForm').each(function(){ 
    this.reset();
});

dabei ist editPOIForm das id-Attribut Ihres Formulars.

Getesteter und verifizierter Code:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript muss in $(document).ready enthalten sein und mit Ihrer Logik übereinstimmen.

Warum verwenden Sie document.getElementById("myId").reset(); nicht? das ist das einfache und hübsche

Die einfachste und beste Lösung ist
$("#form")[0].reset();

Nicht hier verwenden -
$(this)[0].reset();

Ich benutze das :

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

Und hier ist mein Button:

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

Nehmen wir an, wenn Sie die Felder löschen möchten und mit Ausnahme von accountType, wird das Dropdown-Feld für die mittlere Zeit auf einen bestimmten Wert zurückgesetzt, z. B. "All". Die verbleibenden Felder sollten auf leer gesetzt werden, dh Textfeld bestimmte Felder als unsere Anforderung.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Verwenden Sie diesen Code, wenn Sie die normale Reset-Funktion von jQuery aufrufen möchten

setTimeout("reset_form()",2000);

Schreiben Sie diese Funktion aus Site jQuery in Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

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

1. frmID ist die Identifikation des Formulars

2. OnSuccess der Operation nennen wir die JavaScript-Funktion mit dem Namen "ClearInput"

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

3. wenn Sie beides richtig machen, können Sie es nicht verhindern, dass es funktioniert.

Der folgende Code löscht das gesamte Formular und die Felder sind leer. Wenn Sie nur ein bestimmtes Formular löschen möchten, wenn die Seite mehr als ein Formular enthält, geben Sie bitte die ID oder Klasse des Formulars an

$("body").find('form').find('input,  textarea').val('');

Ich habe ein universelles jQuery-Plugin geschrieben:

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

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

Keines der oben genannten Verfahren funktioniert in einem einfachen Fall, wenn die Seite einen Aufruf an die Webbenutzersteuerung enthält, der die Verarbeitung der Anforderung an IHttpHandler (captcha) ..__ umfasst form (vor dem Senden der HttpHandler-Anforderung) funktioniert alles einwandfrei.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Wenn ich alle Felder mit Ausnahme von accountType löschen möchte, verwenden Sie Folgendes

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

der Code, den ich hier und in verwandten SO - Fragen sehe, scheint unvollständig zu sein.

Beim Zurücksetzen eines Formulars werden die ursprünglichen Werte aus dem HTML-Code festgelegt. Daher habe ich dies für ein kleines Projekt zusammengestellt, das ich basierend auf dem obigen Code durchführte:

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

Bitte lassen Sie mich wissen, wenn mir etwas fehlt oder dass etwas verbessert werden kann.