Formularfelder mit jQuery löschen

402

Ich möchte alle Eingabe- und Textfeldfelder in einem Formular löschen. Bei Verwendung einer Eingabeschaltfläche mit der resetKlasse funktioniert dies wie folgt :

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Dadurch werden alle Felder auf der Seite gelöscht, nicht nur die aus dem Formular. Wie würde mein Selektor nur für die Form aussehen, in der sich die eigentliche Reset-Taste befindet?

tbuehlmann
quelle
Überprüfen Sie die Antwort von Paolo Bergantino stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
Wicked Coder
2
Eine detailliertere Methode zum Zurücksetzen eines Formulars finden Sie hier .
Usbekjon

Antworten:

487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});
ShaneBlake
quelle
49
Vergiss deine input[type=password]Felder nicht.
SammyK
64
Diese Antwort deckt die ursprüngliche Frage ab. Diejenigen, die mehr als nur Textfelder wollen, müssen natürlich nach Bedarf Code hinzufügen ...
ShaneBlake
2
Denken Sie auch daran, dass es in HTML5 mehr Eingaben als type = password (wie SammyK sagte) geben wird: type = url, type = digits, type = email usw. http://www.w3.org/TR/html5/forms .html # Zustände-des-Typ-Attributs
Gabriel
6
Ein kleiner Tipp: Dieser Selektor wählt keine Eingabeelemente aus, die auf dem impliziten Typ = Text basieren. Sie müssen den Typ = Text explizit in Ihr Markup aufnehmen. Das mag offensichtlich sein, aber es war nicht für mich, gerade jetzt :-)
Elbin
2
@CaptSaltyJack: Das setzt sie auf Standardwerte zurück, was nicht dasselbe ist wie das Löschen ...
ShaneBlake
628

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

Weitere Informationen finden Sie in diesem Beitrag: Zurücksetzen eines mehrstufigen Formulars mit jQuery

Oder

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

Wie jQuery vorschlägt :

Zum Abrufen und Änderung DOM Eigenschaften wie die checked, selectedoder disabledZustand der Formelemente und nutzt die .prop () Methode.

ngen
quelle
3
Der erste Code setzt die Werte der Kontrollkästchen auf "", anstatt sie nur zu deaktivieren. Die Auswahl wird nicht beeinflusst, da Options-Tags ausgewählt werden.
6
Um zu vermeiden, dass Kontrollkästchenwerte entfernt werden, habe ich Folgendes verwendet, inspiriert von Ihrer Antwort : $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. Es werden Standardwerte entfernt (dh value="something"nicht für Kontrollkästchen oder Auswahlen).
Jeppe Mariager-Lam
17
VERWENDEN SIE DIESES NICHT (Option 1). Wenn Sie über Funkgeräte, Kontrollkästchen oder Auswahlmöglichkeiten verfügen, verschwenden Sie viel Zeit damit, einen seltsamen Fehler zu finden, nachdem deren Werte verschwunden sind. Die richtige Version, die ihre Werte intakt lässt: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');(basierend auf Jeppe Mariager-Lams Kommentar)
Konstantin Pereiaslov
8
Gibt es einen Grund, die zweite Option zu vermeiden?
Rineez
6
Ihre zweite Lösung ist die eigentliche Antwort
Abzarak
159

Gibt es einen Grund, warum dies nicht verwendet werden sollte?

$("#form").trigger('reset');
user768680
quelle
17
@ pythonian29033: und mit Ihrem Ansatz setzen Sie ALLE Formulare auf der Seite auf die Standardeinstellungen zurück ... was definitiv NICHT das ist, was ein normaler Entwickler möchte. Ich denke, ein jQuery-Entwickler sollte die Tatsache beachten, dass er / sie den Selektor von einem Beispielcode in den entsprechenden ändern muss ...
Sk8erPeter
8
@ Sk8erPeter Wenn Sie mehrere Elemente auf der Seite mit der ID haben form, machen Sie es falsch. Sie hätten Recht, wenn der Selektor wäre form, aber es ist eher der ID-Selektor #form.
Brandones
@brandones: Du hättest darauf achten sollen, worauf du geantwortet hast, weil du falsch liegst ... :) Überprüfe den Code, den pythonian29033 geschrieben hat (auf den ich zuvor geantwortet habe): Löst$("form").trigger('reset'); wirklich das "Reset" -Ereignis für ALLE <form>Elemente aus. In den meisten Fällen kann es falsch sein. Aber $("#form").trigger('reset');(in der ursprünglichen Antwort gezeigt) nur löst das „Reset“ Ereignis auf dem Elemente, das die „Form“ id gesetzt hat (erreichbar mit dem #formSelektor). Und ja, eine ID sollte nur einmal verwendet werden. Deshalb wird sie "ID" genannt, da sie ein Element eindeutig identifiziert.
Sk8erPeter
61

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

So etwas sollte funktionieren

$('yourdiv').find('form')[0].reset();
parapura rajkumar
quelle
Ich habe nur den js-Code aus meinem ersten Beitrag und möchte, dass er auf jeder Seite mit mehreren Reset-Schaltflächen in verschiedenen Formen funktioniert. Es ist also nur der Selektor, der einen Beitrag benötigt.
Tbuehlmann
51

Wenn Sie Selektoren verwenden und Werte zu leeren Werten machen, wird das Formular nicht zurückgesetzt, sondern alle Felder werden leer. Beim Zurücksetzen wird das Formular so erstellt, wie es vor allen Bearbeitungsaktionen des Benutzers nach dem Laden des Formulars von der Serverseite war. Wenn eine Eingabe mit dem Namen "Benutzername" vorhanden ist und dieser Benutzername von der Serverseite vorab eingegeben 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 vorhanden 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 müssen, z. B. einem leeren Wert, können Sie die meisten Lösungen aus anderen Kommentaren verwenden.

Lukas Liesis
quelle
29

Einfach, funktioniert aber wie ein Zauber.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
jroi_web
quelle
14
Nur dass die Felder nicht gelöscht werden. Es setzt sie auf ihre Standardeinstellungen.
Mark Fraser
29

Wenn jemand diesen Thread noch 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-Rücksetzbefehl:

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

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

Prost!

Tarmo Saluste
quelle
Wie es sagt. Es wird auf den ursprünglichen Formwert zurückgesetzt und die Werte nicht geleert. Aber ja, wenn Sie ein Formular mit Standardwerten geladen haben, werden diese nicht gelöscht. Wahrscheinlich eine JS-Schleife, die alle Eingaben durchläuft und löscht
Tarmo Saluste
21
$('form[name="myform"]')[0].reset();
ein Stift
quelle
17

Warum muss das ü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


Versuchte dies zuerst, es werden keine Felder mit Standardwerten gelöscht.

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

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});
Matt Ball
quelle
1
Versuchte dies zuerst, es werden keine Felder mit Standardwerten gelöscht.
Tbuehlmann
Es gibt noch einen weiteren Grund, warum Sie für diesen häufig JavaScript benötigen. Das Formular ist möglicherweise überhaupt kein "Formular". Beispielsweise ist Ihr Formular nur eine Sammlung von Eingaben für eine Backbone.js / Ember.js / AngularJS-App. Die Daten werden niemals als herkömmliches Formular an den Server gesendet, sondern müssen ausschließlich mit dem JavaScript-Client verarbeitet werden. In solchen Fällen gibt es kein Formular zum Zurücksetzen, an dem gearbeitet werden kann.
John Munsch
3
.live()ist veraltet und auch langsam / unnötig. Sie könnten einfach .bind()oder verwenden .on().
Kevin Beal
14

Wenn Sie alle Eingabefelder unabhängig von ihrem Typ leeren möchten, ist dies nur eine Minute entfernt

 $('#MyFormId')[0].reset();
Raschi Goyal
quelle
12

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

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

oder

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

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

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

Denken Sie daran, nicht zu vergessen [0]. 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 beachten, dass diese Methoden Ihr Formular nur auf den vom Server beim Laden der Seite festgelegten Anfangswert zurücksetzen. Das heißt, wenn Ihre Eingabe vor einer zufälligen Änderung auf den Wert 'set value' gesetzt wurde, wird das Feld nach dem Aufruf der Reset-Methode auf denselben Wert zurückgesetzt.

Ich hoffe es hilft

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

Wo editPOIFormist das idAttribut Ihres Formulars?

Wissensdienst
quelle
2
Es wird immer nur einen geben #editPOIFormund daher .each()macht die Methode keinen Sinn. Selbst wenn Sie diese ID mehreren Formularen hinzufügen, wird immer nur eines zurückgegeben.
Kevin Beal
1
Mit each () können Sie dies (anstelle von $ (this)) verwenden, um zum zugrunde liegenden DOM-Objekt zu gelangen, und reset () aufrufen. Angenommen, Sie möchten auf die Standardwerte zurücksetzen, anstatt alles zu löschen, ist dies eine gute Lösung.
Dave
@ Dave Könnte auch nur verwenden$('#editPOIForm').get(0).reset();
Thomas Daugaard
2
@ThomasDaugaard: Wenn Sie get (0) oder einfach $ ('# editPOIForm') [0] verwenden, wird ein Skriptfehler angezeigt, wenn $ ('# editPOIForm') keinen Elementen entspricht, während jedes () ohne fehlschlägt ein Fehler. Ich nehme an, es hängt von Ihren Prioritäten ab, was die Fehlerbehandlung betrifft.
Dave
6

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

Carlos Alvarez
quelle
6

Getesteter und verifizierter Code:

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

Javascript muss enthalten sein $(document).readyund mit Ihrer Logik übereinstimmen.

DeepCode
quelle
5

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

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

Mamun Sabuj
quelle
Nur eine kleine Warnung: Wenn Sie Standardwerte für die Eingaben haben, z. B. vom Server gerendert, form.reset();werden diese Werte zurückgesetzt und die Eingaben nicht gelöscht.
Evil_Bengt
4

Nehmen wir an, wenn Sie die Felder löschen möchten und außer accountType, wird das Dropdown-Feld für die mittlere Zeit auf einen bestimmten Wert zurückgesetzt, dh 'Alle'. Die verbleibenden Felder sollten auf leer zurückgesetzt werden, dh das Textfeld. Dieser Ansatz wird zum Löschen verwendet bestimmte Bereiche 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';
     }
 });
Gnanasekaran Ebinezar
quelle
Vollständigste Antwort. Vielen Dank.
RationalRabbit
Eine Frage: Wie würden Sie dies auf ein bestimmtes Formular lenken, wenn Sie es programmgesteuert und nicht mit einem Klick auf eine Schaltfläche ausführen würden?
RationalRabbit
4

Ich benutze das :

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

Und hier ist mein Knopf:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>
Matheno
quelle
Es ist ein Reset-Eingabetyp verfügbar w3.org/TR/html-markup/input.reset.html
Thomas Welton
3

Verwenden Sie diesen Code, wenn Sie die normale Rücksetzfunktion von jQuery aufrufen möchten

setTimeout("reset_form()",2000);

Und schreiben Sie diese Funktion aus Site jQuery auf Document Ready

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

Einige von Ihnen haben sich darüber beschwert, dass Radios und dergleichen vom Standardstatus "Aktiviert" befreit sind. Sie müssen lediglich die Kontrollkästchen: Radio ,: zur .not hinzufügen, und das Problem ist behoben.

Wenn Sie nicht alle anderen Rücksetzfunktionen zum Laufen bringen können, wird dies der Fall sein.

  • Angepasst an die Antwort von ngen

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }
Gregory Bowers
quelle
2
@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. OnSuccessder 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 beide richtig machen, können Sie nicht verhindern, dass es funktioniert ...

LWC Nirosh
quelle
1

Der folgende Code löscht das gesamte Formular und seine 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('');
shivaP
quelle
0

Wenn ich alle Felder außer accountType löschen möchte, verwenden Sie Folgendes

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');
Gnansekaran Ebinezar
quelle
1
Sie möchten die Werte für die Kontrollkästchen und Radiobuttons nicht verlieren, sondern nur deaktivieren. Dies ist keine gute Lösung
Frankey
0

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

Das Zurücksetzen eines Formulars bedeutet das Festlegen der ursprünglichen Werte aus dem HTML-Code. Daher habe ich dies für ein kleines Projekt zusammengestellt, das ich basierend auf dem obigen Code durchgeführt habe:

            $(':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 ich etwas vermisse oder etwas verbessert werden kann.

Rafael Kitover
quelle
0

Keiner der oben genannten Fälle funktioniert in einem einfachen Fall, wenn die Seite einen Aufruf der Webbenutzersteuerung enthält, der die Verarbeitung von IHttpHandler-Anforderungen (captcha) umfasst. Nach dem Senden der Anforderung (für die Bildverarbeitung) löscht der folgende Code nicht die Felder im Formular (vor dem Senden der HttpHandler-Anforderung). Alles funktioniert ordnungsgemäß.

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

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

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>

Jekis
quelle
-2

Fügen Sie die versteckte Schaltfläche zum Zurücksetzen wie folgt hinzu

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}
Jayan.CA
quelle
-4

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

var el = $(this);

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

return false;

});

Júnior Mendonça
quelle