JavaScriptを使用してフォームをリセット（クリア）する方法は？

123

試しました$("#client.frm").reset();が動作しません。jQueryを介してフォームをリセットするにはどうすればよいですか。

javascript jquery

— アクズマ
ソース

stackoverflow.com/questions/680241/blank-out-a-form-with-jqueryの

— svk

6

注：クリアとリセットは2つの異なるものです。リセット（.reset()）は、HTMLの値を元の値に戻します。これについては、以下のNick Craverのソリューションを参照してください。「クリア」とは通常、値を空白/チェックなし/選択解除に戻すことを意味します。MahmoudSソリューションを参照してください。

— ルーク

258

form.reset() はDOM要素のメソッド（jQueryオブジェクトではありません）なので、次のものが必要です。

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

またはjQueryなし：

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

— ニッククレイバー
ソース

4

「jQueryオブジェクトは、1つ以上のDOM要素の配列のようなラッパーです。jQueryオブジェクトではなく、実際のDOM要素への参照を取得するには、2つのオプションがあります。最初の（および最速の）メソッドは配列表記を使用することです：$（ "#foo"）[0]; // document.getElementById（ "foo"）と同等2番目のメソッドは.get（）関数を使用することです：$（ "#foo "）.get（0）; //上記と同じ、遅いだけです。" learn.jquery.com/using-jquery-core/faq/...

— アンドリュー

次のエラーが表示されます：TypeError：document.getElementById（...）。resetは関数ではありません[詳細]。フォームにはFormValidateプラグインを使用しています。そのresetFormもフォームをリセットしません=（何か提案はありますか？

— Eugen Konkov

オイゲン、インディアナジョーンズやザラストクルセードと同じように、ここであなたは信仰を飛躍させなければなりません。document.getElementById（ 'myform'）。reset（）を呼び出すと、そのメソッドが存在しないように見えても、実際にはフォームがクリアされます。典型的なM $難読化。

— Newclique

43

あなたは単に行うことができます：

$("#client.frm").trigger('reset')

— user2057484
ソース

1

a Triggerが私を新しい世界に連れて行ってくれる

— gonatee

17

純粋なJSソリューションは次のとおりです。

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

— マフムード・サレ
ソース

1

ほぼ同等のjQueryプラグインソリューションを次に示します。stackoverflow.com/a/24496012/1766230（私はあなたのselectedIndex = -1トリックを使用しました。）

— Luke

5

このソリューションは現在機能していません（2016年）。フォームにテキスト、パスワード、およびテキストエリア入力のデフォルト値がある場合、elements [i] .value = ""ではなく、elements [i] .defaultValue = ""を使用する必要があります。

— Andrew F.

var field_type = elements[i].type.toLowerCase();

— MartynasJanuškauskas18年

@Andrew：何をしたいかによります。フォームをdefaultValues にリセットするだけの場合reset()は、フォームオブジェクトを呼び出すだけです。ここでのコードは、フォームをリセットするのではなく、フォームをクリアすることです。

— プロテクター1

4

、reset（）メソッドはデフォルト値とチェックボックスフィールドをクリアせず、さらに多くの問題があります。

完全にリセットするには、以下のリンクを確認してください-

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— アルペシュ
ソース

4

Javascript＆を通してフォームをリセット（クリア）しますjQuery。

JavaScriptの例：

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

jQueryの例：

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

$('#client.frm').trigger("reset");

— ガウランP
ソース

4

form.reset()フォームの一部の入力タグに属性がある場合、関数は機能しないことに注意してくださいname='reset'

— アレックスボブロフ
ソース

2

これを試して：

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

— Hazem_M
ソース

2

次のようにフォームをクリアします

document.forms[0].reset();

グループ内のフォーム要素をクリアするだけです。これを使用してforms[0]。

— ナガラジュヴッパラ
ソース

1

JavaScript関数を使用reset()：

document.forms["frm_id"].reset();

— フェリックス・バガー
ソース

1

以下を使用できます。

$('[element]').trigger('reset')

— Justlearning
ソース

0

このコードを試してください。あなたの答えのための完全なソリューション。

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

— ジャファー・ウィルソン
ソース

-1

onclick関数を使用してフォーム全体をクリアできます。コードは次のとおりです。

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

window.location.reload（）関数がページを更新し、すべてのデータが消去されます。

— アルジュン
ソース