web-dev-qa-db-ja.com

JQueryと.reset（）メソッドを使用してフォームをリセットする方法

リセットボタンをクリックしたときにフォームをリセットできるコードが機能していました。しかし、私のコードが長くなった後、私はそれがもう働かないことに気づきます。

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

そして私のjQuery：

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

.reset()メソッドを機能させるためにコードに含めるべきソースはありますか？以前私は使っていました：

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

そして.reset()メソッドは機能していました。

現在使っています

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

それが理由の1つでしょうか。

javascriptjqueryformsreset
222
yvonnezoe

私はついに問題を解決しました！ @RobGはformタグとtableタグについては正しかった。formタグはテーブルの外側に配置する必要があります。 それと、

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

jqueryや他の何かを必要とせずに動作します。ボタンをクリックするだけで簡単に〜フォーム全体がリセットされます。

16
yvonnezoe

trigger（）を使ってみることができます 参照リンク

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

http://jsfiddle.net/8zLLn/ /

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

JSフィドルに入れてください。意図したとおりに動作しました。

そのため、ここで問題になっているのは前述の問題のどれもありません。 IDが競合している可能性がありますか。クリックは実際に実行されていますか？

編集：（私は適切なコメント能力のない悲しい袋だから）それはあなたのコードと直接の問題ではありません。現在使用しているページのコンテキストから外しても問題なく動作します。そのため、特定のjQuery/javascriptおよび属性付きフォームデータを持つものではなく、別のものにする必要があります。私はその周りのコードを二分し始めて、それが起こっている場所を見つけようとするでしょう。つまり、「念のため」と言ってもいいでしょう。

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

クリック機能で、正しいフォームをターゲットにしていることを確認してください。

もしそうなら、それはここに記載されていないものでなければなりません。

パート2を編集：あなたが試すことができる一つのことは（それが正しくそれをターゲットにしていない場合）あなたが使っているものの代わりに "input：reset" を使うことです。実際のクリックが何をターゲットにしているのかを突き止めるための作業。 firebug/developerツールを開いてください。

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

そして何がポップアップするのか見てください。それからそこから行くことができます。

261
FullOnFlatWhite

この記事によると ここ 、jQueryにはreset()メソッドがありません。しかしネイティブJavaScriptはそうします。したがって、次のいずれかを使用してjQuery要素をJavaScriptオブジェクトに変換します。

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

これは、実際にはjQueryよりVanilla Javascriptで簡単にできることの1つです。 jQueryにはresetメソッドはありませんが、HTMLフォーム要素にはありますので、次のようにフォーム内のすべてのフィールドをリセットできます。

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

これをjQuery経由で行うと（$('#configform')[0].reset()の他の回答に見られるように）、[0]はdocument.getElementById経由で直接取得するのと同じフォームのDOM要素を取得します。後者のアプローチはより効率的でより単純です（jQueryアプローチでは最初にコレクションを取得してからそれから要素を取得する必要がありますが、Vanilla Javascriptでは直接要素を取得するだけです）。

43
Nick F

リセットボタンにはスクリプト（または名前やID）はまったく必要ありません。

<input type="reset">

これで終わりです。しかし、実際に must スクリプトを使用するのであれば、すべてのフォームコントロールにはそれが入っているフォームを参照する form プロパティがあるので注意してください。

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

しかし、リセットボタンがはるかに良い選択です。

21
RobG

Jquery関数 .closest（element） および .find（...） を使用する。

parent 要素を取得して child を探す。

最後に、必要な機能を実行します。

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

私はこの簡単なコードを使います。

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

このようにid = resetformを指定してinput type = resetを追加するだけです。

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

次に、jqueryを使用すると、次のようにid = resetformを使用して要素に.click（）関数を使用するだけです

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

また、フォームがリセットされます。注：CSSを使用して、id = resetformでリセットボタンを非表示にすることもできます。

<style>
#resetform
{
display:none;
}
</style>
4
Chuksy
<button type="reset">Reset</reset>

私が考えることができる最も簡単な方法は堅牢です。フォームタグ内に配置します。

3
luminancedesign

最初の行はフォーム入力をリセットします

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

2番目のものはselect2をリセットします

2
Ali Jamal

これがJqueryを使った簡単な解決法です。それは世界的に機能します。コードを見てください。

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

リセットする必要があるすべてのフォームのボタンに明確なクラスを追加します。例えば：

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

このjQueryリセット機能を使用すると、フォームフィールドをすばやくリセットできます。

あなたが成功の応答を得たとき、それからコードの下で起動します。

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

1
Kiran Kanzar

あなたのコードはうまくいくはずです。 static/jquery-1.9.1.min.jsが存在することを確認してください。また、static/jquery.min.jsに戻ってみることもできます。それで問題が解決した場合は、問題は特定されています。

0
ic3b3rg

以下を使用できます。

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

次に、フォームをクリアします。

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