So setzen Sie ein Formular mit jQuery mit der Methode .reset () zurück

Ich hatte einen Arbeitscode, der mein Formular zurücksetzen konnte, wenn ich auf eine Schaltfläche zum Zurücksetzen klickte. Nachdem mein Code jedoch länger wird, stelle ich fest, dass er nicht mehr funktioniert.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

Und meine jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Gibt es eine Quelle, die ich in meine Codes aufnehmen sollte, damit die .reset()Methode funktioniert? Zuvor habe ich verwendet:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

und die .reset()Methode funktionierte.

Zur Zeit benutze ich

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Könnte es möglicherweise einer der Gründe sein?

Sie können versuchen, den Trigger () -Referenzlink zu verwenden

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

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Legen Sie es in JS Geige. Arbeitete wie vorgesehen.

Keines der oben genannten Probleme ist hier schuld. Vielleicht haben Sie ein widersprüchliches ID-Problem? Wird der Klick tatsächlich ausgeführt?

Bearbeiten: (weil ich ein trauriger Sack ohne angemessene Kommentarfähigkeit bin) Es ist kein Problem direkt mit Ihrem Code. Es funktioniert einwandfrei, wenn Sie es aus dem Kontext der Seite entfernen, die Sie gerade verwenden. Anstatt dass es sich um etwas mit den bestimmten jQuery / Javascript- und zugeordneten Formulardaten handelt, muss es etwas anderes sein. Ich würde anfangen, den Code um ihn herum zu halbieren und versuchen herauszufinden, wo er vor sich geht. Ich meine, nur um sicherzugehen, könnten Sie ...

console.log($('#configform')[0]);

in der Klickfunktion und stellen Sie sicher, dass es auf die richtige Form abzielt ...

und wenn ja, muss es etwas sein, das hier nicht aufgeführt ist.

Teil 2 bearbeiten: Eine Sache, die Sie versuchen könnten (wenn es nicht richtig ausgerichtet ist), ist die Verwendung von "input: reset" anstelle dessen, was Sie verwenden. Außerdem würde ich vorschlagen, weil es nicht das Ziel ist, das falsch funktioniert, um es herauszufinden worauf der eigentliche Klick abzielt. Öffnen Sie einfach die Firebug- / Entwicklertools, was Sie haben

console.log($('#configreset'))

und sehen, was auftaucht. und dann können wir von dort gehen.

Laut diesem Beitrag hier hat jQuery keine reset()Methode; aber natives JavaScript tut es. Konvertieren Sie das jQuery-Element in ein JavaScript-Objekt, indem Sie entweder Folgendes verwenden:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Dies ist eines der Dinge, die in Vanille-Javascript tatsächlich einfacher zu erledigen sind als in jQuery. jQuery hat keinereset Methode, das HTML-Formularelement jedoch, sodass Sie alle Felder in einem Formular wie folgt zurücksetzen können:

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

Wenn Sie dies über jQuery tun (wie in anderen Antworten hier zu sehen :) $('#configform')[0].reset(), [0]ruft das gleiche Formular-DOM-Element ab, über das Sie direkt erhalten würden document.getElementById. Der letztere Ansatz ist jedoch sowohl effizienter als auch einfacher (da Sie mit dem jQuery-Ansatz zuerst eine Sammlung erhalten und dann ein Element daraus abrufen müssen, während Sie mit dem Vanille-Javascript das Element nur direkt erhalten).

Eine Reset-Schaltfläche benötigt überhaupt kein Skript (oder Name oder ID):

<input type="reset">

und du bist fertig. Aber wenn Sie wirklich müssen Skript verwenden, beachten Sie, dass jedes Formular - Steuerelement hat eine Form Eigenschaft , dass Verweise der Form ist es in, so dass Sie tun können:

<input type="button" onclick="this.form.reset();">

Eine Reset-Taste ist jedoch eine weitaus bessere Wahl.

Ich habe endlich das Problem gelöst !! @RobG hatte Recht mit dem formTag und dem tableTag. Das formTag sollte außerhalb des Tisches platziert werden. damit,

<td><input type="reset" id="configreset" value="Reset"></td>

funktioniert ohne die Notwendigkeit von jquery oder irgendetwas anderem. Einfach auf den Button klicken und tadaa ~ das ganze Formular wird zurückgesetzt;) genial!

Ich benutze diesen einfachen Code:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

Mit den jquery-Funktionen .closest (Element) und .find (...) .

Das übergeordnete Element erhalten und das Kind suchen .

Führen Sie schließlich die erforderliche Funktion aus.

$("#form").closest('form').find("input[type=text], textarea").val("");

In der ersten Zeile werden die Formulareingaben zurückgesetzt

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Der zweite setzt select2 zurück

Optional: Sie können dies verwenden, wenn Sie verschiedene Typen mit unterschiedlichen Ereignissen registriert haben

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Mit dieser jQuery-Reset-Funktion ist ein schnelles Zurücksetzen der Formularfelder möglich.

Wenn Sie eine Erfolgsantwort erhalten haben, feuern Sie unter dem Code.

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

Sie können einfach einen Eingabetyp = reset mit einer solchen id = resetform hinzufügen

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

dann verwenden Sie mit jquery einfach die Funktion .click () für das Element mit der ID = resetform wie folgt

<script> 
$('#resetform').click();
</script>

und das Formular wird zurückgesetzt Hinweis: Sie können die Schaltfläche zum Zurücksetzen auch mit id = resetform mithilfe Ihres CSS ausblenden

<style>
#resetform
{
display:none;
}
</style>

Hier ist eine einfache Lösung mit Jquery. Es funktioniert global. Schauen Sie sich den Code an.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Fügen Sie einer Schaltfläche in jeder Form, die Sie zum Zurücksetzen benötigen, eine eindeutige Klasse hinzu. Beispielsweise:

<button class="button clear" type="reset">Clear</button>

jQuery hat keine reset()Methode; aber natives JavaScript tut es. Konvertieren Sie das jQuery-Element in ein JavaScript-Objekt, indem Sie entweder Folgendes verwenden:

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

$("#formId").get(0).reset();

Wir können einfach Javascript-Code verwenden

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

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

Am einfachsten kann ich mir vorstellen, dass das robust ist. Innerhalb des Formular-Tags platzieren.

Sie können Folgendes verwenden.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Dann löschen Sie das Formular:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Ihr Code sollte funktionieren. Stellen Sie sicher, dass static/jquery-1.9.1.min.jsvorhanden. Sie können auch versuchen, zu zurückzukehren static/jquery.min.js. Wenn das Problem dadurch behoben wird, haben Sie das Problem genau ermittelt.