jQueryでフォームフィールドをクリアする

フォームのすべての入力フィールドとテキストエリアフィールドをクリアしたい。resetクラスで入力ボタンを使用すると、次のように機能します。

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

これにより、フォームのフィールドだけでなく、ページのすべてのフィールドがクリアされます。実際のリセットボタンが存在するフォームのセレクターはどのように見えますか？

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

jQuery 1.6以降の場合：

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

jQuery <1.6の場合：

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

この投稿を参照してください： jQueryを使用したマルチステージフォームのリセット

または

$('#myform')[0].reset();

jQueryが示唆するように：

などDOM特性取得と変更するchecked、selectedまたはdisabledフォーム要素の状態を、使用.prop（）メソッドを。

これを使用すべきでない理由は何ですか？

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

これは、フォーム入力フィールドのデフォルト値が空でない場合には対応しません。

のようなものがうまくいくはずです

$('yourdiv').find('form')[0].reset();

セレクターを使用して値を空の値にすると、フォームがリセットされず、すべてのフィールドが空になります。リセットは、サーバー側からのフォームのロード後、ユーザーからの編集アクションの前と同じようにフォームを作成することです。「username」という名前の入力があり、そのユーザー名がサーバー側から事前入力されている場合、このページのほとんどのソリューションは、その値を入力から削除し、ユーザーが変更する前の値にリセットしません。フォームをリセットする必要がある場合は、次のようにします。

$('#myform')[0].reset();

フォームをリセットする必要はないが、空の値など、すべての入力に何らかの値を入力する場合は、他のコメントのほとんどの解決策を使用できます。

シンプルですが魅力のように機能します。

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

誰かがまだこのスレッドを読んでいる場合は、jQueryではなく単純なJavaScriptを使用する最も簡単なソリューションを次に示します。入力フィールドがフォーム内にある場合、簡単なJavaScriptリセットコマンドがあります。

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

詳細はこちら：http : //www.w3schools.com/jsref/met_form_reset.asp

乾杯！

$('form[name="myform"]')[0].reset();

JavaScriptを使用する必要があるのはなぜですか？

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

最初に試してみましたが、デフォルト値のフィールドはクリアされません。

次に、jQueryでそれを行う方法を示します。

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

タイプに関係なくすべての入力ボックスを空にしたい場合は、

 $('#MyFormId')[0].reset();

私はフォームをリセットする最も簡単なトリックを得ました

jQuery("#review-form")[0].reset();

または

$("#review-form").get().reset();

JavaScriptを使用すると、この構文で簡単に実行できます getElementById("your-form-id").reset();

この方法でリセット関数を呼び出すことでjqueryを使用することもできます $('#your-form-id')[0].reset();

忘れないでください[0]。次の場合、次のエラーが発生します

TypeError：$（...）。resetは関数ではありません

jQueryは、使用できるイベントも提供します

$（ '＃form_id'）。trigger（ "リセット"）;

私が試したところ、うまくいきました。

注：これらのメソッドは、ページのロード時にサーバーによって設定された初期値にのみフォームをリセットすることに注意することが重要です。これは、ランダムな変更を行う前に入力が値「set value」に設定されていた場合、フィールドは、resetメソッドが呼び出された後に同じ値にリセットされることを意味します。

それが役に立てば幸い

$('#editPOIForm').each(function(){ 
    this.reset();
});

フォームeditPOIFormのid属性はどこですか。

なぜ使用しdocument.getElementById("myId").reset();ないのですか？これはシンプルでかわいいです

テストおよび検証されたコード：

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascriptが含まれ$(document).readyている必要があり、それはロジックに含まれている必要があります。

最も簡単で最良の解決策は
$("#form")[0].reset();

ここでは使用しないでください-
$(this)[0].reset();

accountType以外のフィールドをクリアしたい場合は、平均時間のドロップダウンボックスを特定の値、つまり「すべて」にリセットします。残りのフィールドは空のテキストボックスにリセットする必要があります。このアプローチはクリアに使用されます私たちの要件として特定のフィールド。

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

私はこれを使います：

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

そして、これが私のボタンです：

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

jQueryによって通常のリセット関数を呼び出したい場所でこのコードを使用する

setTimeout("reset_form()",2000);

そして、この関数をサイトのjQueryに書き込みます

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

ラジオなどのデフォルトの「チェック済み」ステータスがクリアされたと不平を言っている人もいます... .notに：radio、：checkboxセレクターを追加するだけで問題は解決します。

他のすべてのリセット関数を機能させることができない場合、これは機能します。

• ngenの回答から改作

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID フォームの識別です

2. OnSuccess" ClearInput" という名前のJavaScript関数を呼び出す操作の

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. これらの両方を正しく行うと、動作を停止することができなくなります...

次のコードはすべてのフォームをクリアし、そのフィールドは空になります。ページに複数のフォームがある場合に特定のフォームのみをクリアしたい場合は、フォームのIDまたはクラスに言及してください

$("body").find('form').find('input,  textarea').val('');

accountType以外のすべてのフィールドをクリアしたい場合は、以下を使用します。

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

ここと関連するSOの質問で私が見るコードは不完全なようです。

フォームをリセットするということは、HTMLから元の値を設定することを意味するため、上記のコードに基づいて行っていた小さなプロジェクトにこれをまとめました。

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

不足しているものや改善できるものがあれば、お知らせください。

上記のいずれも、ページにIHttpHandlerリクエスト処理（キャプチャ）を含むWebユーザーコントロールへの呼び出しが含まれている場合、単純なケースでは機能しません。（画像処理のために）requsrtを送信した後、次のコードは（HttpHandlerリクエストを送信する前に）フォーム上のフィールドをクリアしません。すべてが正しく機能します。

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

ユニバーサルjQueryプラグインを作成しました。

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

非表示のリセットボタンを次のように追加します

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$（ 'form'）。submit（function（）{

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

}）;