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

リセットボタンをクリックしたときにフォームをリセットできる作業コードがありました。しかし、コードが長くなると、もう機能しないことに気付きました。

 <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つでしょうか？

あなたはtrigger（）リファレンスリンクを使用してみてください

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

http://jsfiddle.net/8zLLn/

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

それをJSフィドルに入れてください。意図したとおりに機能しました。

したがって、前述の問題のいずれもここでは誤りではありません。たぶん、IDの競合問題が発生していますか？クリックは実際に実行されていますか？

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

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

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

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

編集パート2：（正しくターゲット設定していない場合）試すことができる1つのことは、使用しているものの代わりに「input：reset」を使用することです。実際のクリックがターゲティングしているもの。firebug /開発者ツールを開いて、あなたを動かし、投げ入れてください

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

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

この記事によると、ここで、jQueryのには持っていないreset()方法を。しかし、ネイティブJavaScriptはそうします。したがって、次のいずれかを使用してjQuery要素をJavaScriptオブジェクトに変換します。

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

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

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

jQueryを介してこれを行う場合（他の回答：を$('#configform')[0].reset()参照）、は、[0]を介して直接取得するのと同じフォームDOM要素をフェッチしますdocument.getElementById。後者のアプローチはより効率的でシンプルですが、jQueryのアプローチでは最初にコレクションを取得してから要素をフェッチする必要があるため、通常のJavascriptでは要素を直接取得します。

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

<input type="reset">

これで完了です。ただし、本当にスクリプトを使用する必要がある場合は、すべてのフォームコントロールに、そのフォームを参照するフォームプロパティがあるので、次のようにすることができます。

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

ただし、リセットボタンの方がはるかに適しています。

ようやく問題を解決しました!! @RobGはformタグとtableタグについて正しかった。タグは、テーブルの外側に配置されるべきです。それと、form

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

jqueryやその他の必要なしに動作します。ボタンをクリックするだけで、tadaa〜フォーム全体がリセットされます;）素晴らしいです！

私はこの単純なコードを使用します：

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

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

親要素を取得し、子を探します。

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

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

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

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

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

オプション：異なるイベントに異なるタイプが登録されている場合、これを使用できます

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

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

成功の応答が得られたら、コードの下で実行します。

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

次のように、id = resetformで入力タイプ=リセットを追加することができます

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

Jqueryを使用した簡単なソリューションを次に示します。グローバルに機能します。コードを見てください。

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

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

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

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

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

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

私たちは単にJavaScriptコードを使用するかもしれません

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

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

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

以下を使用できます。

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

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