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

Question

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

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

原因の一つではないでしょうか？

score 572 · Accepted Answer

572

trigger()参照リンクを使用してみてください

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

于 2014-07-01T08:14:01.843 に答える

score 50 · Accepted Answer

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

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

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

score 28 · Accepted Answer

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

<input type="reset">

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

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

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

score 17 · Accepted Answer

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

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

score 13 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

このように 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>

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

以下を使用できます。

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

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

16 に答える 16

Related

Reference