it-swarm.com.de

Zurücksetzen eines Formulars mithilfe von jQuery mit der .reset () -Methode

Ich hatte einen Arbeitscode, der mein Formular zurücksetzen konnte, wenn ich auf eine Rücksetztaste klicke. Nachdem mein Code jedoch länger geworden ist, wird mir klar, 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 muss, damit die .reset()-Methode funktioniert? Vorher 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. 

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

216
yvonnezoe

Ich habe endlich das Problem gelöst !! @ RobG hatte Recht mit dem Tag form und dem Tag table. Der Tag form sollte außerhalb der Tabelle platziert werden. damit, 

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

funktioniert ohne Jquery oder irgendetwas anderes. Einfach auf den Button klicken und tadaa ~ das gesamte Formular wird zurückgesetzt;) genial!

16
yvonnezoe

sie können versuchen, trigger () Reference Link zu verwenden.

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

http://jsfiddle.net/8zLLn/

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

Legen Sie es in JS Geige. Arbeitete wie beabsichtigt. 

Daher ist hier keine der oben genannten Probleme zu beanstanden. Möglicherweise liegt ein Problem mit der ID vor? Wird der Klick tatsächlich ausgeführt?

Edit: (weil ich ein trauriger Sack bin, ohne die Möglichkeit zu kommentieren) Es ist kein direktes Problem mit Ihrem Code. Es funktioniert gut, wenn Sie es aus dem Kontext der Seite herausnehmen, die Sie gerade verwenden. Es muss also etwas anderes als jQuery/javascript & attributed form data sein. Ich würde anfangen, den Code zu halbieren und herauszufinden, wo es los ist. Ich meine, nur um 'sicher zu gehen', könnten Sie ...

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

in der Klick-Funktion und stellen Sie sicher, dass es auf das richtige Formular ausgerichtet ist ...

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

teil 2 bearbeiten: Eine Sache, die Sie ausprobieren könnten (wenn sie nicht korrekt ausgerichtet ist), ist use "input: reset" arbeiten, um herauszufinden, worauf der eigentliche Klick abzielt. Öffnen Sie einfach die Firebug-/Entwickler-Tools, die Sie in sich werfen 

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

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

259
FullOnFlatWhite

Laut diesem Beitrag hier hat jQuery keine reset()-Methode; aber natives JavaScript tut. Konvertieren Sie das jQuery-Element mit einem der folgenden Befehle in ein JavaScript-Objekt: 

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

Dies ist eines der Dinge, die in Vanilla Javascript eigentlich einfacher sind als jQuery. jQuery hat keine reset-Methode, aber das HTML-Formularelement hat eine Funktion. Sie können also alle Felder in einem Formular wie folgt zurücksetzen:

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

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

42
Nick F

Ein Reset-Button benötigt überhaupt kein Skript (oder Name oder ID):

<input type="reset">

und du bist fertig. Wenn Sie jedoch ein (notwendiges Skript verwenden, beachten Sie, dass jedes Formularsteuerelement über eine form - Eigenschaft verfügt, die auf das Formular verweist, in dem es sich befindet. Sie können also Folgendes tun:

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

Eine Reset-Taste ist jedoch eine weitaus bessere Wahl.

20
RobG

Mit der Jquery-Funktion .closest (Element) und .find (...) .

Holen Sie sich das Element parent und suchen Sie das child .

Zum Schluss machen Sie die benötigte Funktion.

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

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

Sie können einfach einen Eingabetyp = reset mit einer id = resetform wie diesem 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 bei jquery einfach die .click () - Funktion 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 Rücksetzschaltfläche mit id = resetform auch mit Ihrer CSS ausblenden

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

In der ersten Zeile werden die Formulareingaben zurückgesetzt

$('#AddRowform').trigger("reset"); 
$('#AddRowform select').trigger("change");

Das zweite setzt select2 zurück

4
Ali Jamal
<button type="reset">Reset</reset>

Die einfachste Art, wie ich denken kann, ist robust. Platzieren Sie innerhalb des Formular-Tags.

3
luminancedesign

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

wenn Sie eine erfolgreiche Antwort erhalten haben, geben Sie den folgenden Code ein.

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

1
Kiran Kanzar

Ihr Code sollte funktionieren. Stellen Sie sicher, dass static/jquery-1.9.1.min.js vorhanden ist. Sie können auch versuchen, auf static/jquery.min.js zurückzugreifen. Wenn das Problem dadurch behoben wird, haben Sie das Problem gefunden.

0
ic3b3rg

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 jedem Formular eine klare Klasse hinzu, die Sie zum Zurücksetzen benötigen. Zum Beispiel: 

<button class="button clear" type="reset">Clear</button>
0
Ijharul Islam

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