Formularfelder mit jQuery löschen

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?

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

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.

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

$("#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 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.

Einfach, funktioniert aber wie ein Zauber.

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

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!

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

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

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

 $('#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 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

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

Wo editPOIFormist das idAttribut Ihres Formulars?

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

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.

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

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

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

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>

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>

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

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

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

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

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

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.

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>

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>

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

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

var el = $(this);

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

return false;

});