web-dev-qa-db-ja.com

JQueryを使ってフォームフィールドをクリアする

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

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

これにより、フォームのフィールドだけでなく、ページ上のすべてのフィールドが消去されます。実際のリセットボタンが置かれているフォームに対して、セレクタはどのように見えるでしょうか。

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

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として が示唆している ：

フォーム要素のchecked、selected、disabledなどのDOMプロパティを取得および変更するには、 .prop（） メソッドを使用します。

593
ngen

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

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

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

うまくいくはずのようなもの

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

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

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

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

48
Lukas

シンプルだが魅力のように働く。

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

まだ誰かがこのスレッドを読んでいるのであれば、これはjQueryではなくプレーンなJavaScriptを使用した最も簡単な解決策です。入力フィールドがフォーム内にある場合は、簡単なJavaScriptのリセットコマンドがあります。

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

それについての詳細はここ： http://www.w3schools.com/jsref/met_form_reset.asp

乾杯！

27
Tarmo Saluste
$('form[name="myform"]')[0].reset();
20
apen

どうしてそれを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('');
});
15
Matt Ball

タイプに関係なくすべての入力ボックスを空にしたい場合は、次の手順で細かい手順を実行します。

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

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

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

または

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

Javascriptを使えば、このシンタックスgetElementById("your-form-id").reset();を使って簡単に実行できます。

このようにreset関数を呼び出すことでjqueryを使うこともできます$('#your-form-id')[0].reset();

[0]を忘れないようにしてください。あなたは次のエラーが発生します

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

JQueryはあなたが使うことができるイベントも提供します

$（ '＃form_id'）。trigger（ "reset"）;

試してみましたが、うまくいきました。

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

それが役に立てば幸い

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

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

6
Knowledge Serve

テスト済みで検証済みのコード：

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

Javascriptは$(document).readyに含まれていなければならず、それはあなたのロジックに含まれていなければなりません。

5
DeepCode

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

5
Carlos Alvarez

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

ここでは使わない -
$(this)[0].reset();

4
Mamun Sabuj

私はこれを使う：

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

そしてここに私のボタンがあります：

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

AccountType以外のフィールドをクリアする場合は、その間にドロップダウンボックスが特定の値、つまり「All」にリセットされます。残りのフィールドは空のテキストボックスにリセットする必要があります。私達の条件として特定の分野。

 $(':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';
     }
 });
3
Gnanasekaran Ebinezar

あなたがjQueryによってノーマルリセット関数を呼び出したいところでこのコードを使ってください

setTimeout("reset_form()",2000);

そして、この機能を書き出してくださいReady on Site jQuery Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>
2
Monzur
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" }))
  1. frmIDはフォームのIDです

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

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

  3. あなたがこれらの権利の両方をするならば、あなたはそれが機能するのを止めることができないでしょう...

1
L.W.C. Nirosh

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

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

私は普遍的な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>
0
Jekis

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

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

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

AccountType以外のすべてのフィールドをクリアしたい場合は、次のようにします。

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

ここや、関連する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()) })

足りないものや改善できるものがあれば教えてください。

0
Rafael Kitover