連番が変わる毎に1つずつ処理を書いているjQueryのコードを繰り返し処理に変更したい

jQueryの繰り返し処理について質問です。

フォームを部分的にリセットしたくて、
以下のようなjQueryを追加しました。

HTML
1<form action="/" method="POST">
2  <div id="form1">
3    <input type="text">
4    <label>
5      <input type="radio" value="ラジオ1">ラジオ1
6    </label>
7    <label>
8      <input type="radio" value="ラジオ2">ラジオ2
9    </label>
10  </div>
11  <button id="form1_reset">入力内容をクリア</button>
12  <div id="form2">
13    <input type="text">
14    <label>
15      <input type="check" value="チェックボックス1">チェックボックス1
16    </label>
17    <label>
18      <input type="check" value="チェックボックス2">チェックボックス2
19    </label>
20  </div>
21  <button id="form2_reset">入力内容をクリア</button>
22  ・
23  ・
24  ・
25</form>

jQuery
1$(function () {
2  $('#form1_reset').click( function() {
3    $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
4    return false;
5  });
6
7  $('#form2_reset').click( function() {
8    $('#form2').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
9    return false;
10  });
11
12  $('#form3_reset').click( function() {
13    $('#form3').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
14    return false;
15  });
16
17  ・
18  ・
19  ・
20  ・
21});

form1_resetをクリックすると、
form1内のフォームがリセット、
form2_resetをクリックすると、
form2内のフォームがリセットされるという感じです。

これをform10まで書いています。

連番が変わっていくだけなので繰り返し処理で
できそうな気がするのですが、いかんせん初心者でわかりませんでした。
上記をもっとスマートに書くとしたら、どのようにすれば良いでしょうか？

アドバイスいただけると幸いです。
よろしくお願いいたします。

kei344

2020/03/16 03:21

HTMLも質問文にコードブロックで追記してください。

yambejp

2020/03/16 03:44 編集

hidden要素は対象外なのですか？ラジオボタンやチェックボックスは:radio、:checkbox 連番的な考え方は捨てたほうが良いと思います

tetutetutetu

2020/03/16 12:26

ご返信ありがとうございます。HTMLを追加いたしました。また、hidden要素は存在しないフォームなので除外して大丈夫です。

行動規範の内容に同意します

回答5件

考え方によります

reset処理を選べば初期状態に戻すことは可能
初期状態が必ずしも空ではないものを空にするには適当なclassで対象かどうかを指定して処理する
codepen

投稿2020/03/16 03:40

編集2020/03/16 12:50

yambejp

総合スコア116724

yambejp

2020/03/16 03:43

あとはHTMLを例示いただいて、どうしたいか具体的に提示ください

yambejp

2020/03/16 12:52

ざっくりサンプルをcodepenにあげておきました。グルーピングすればこまかいidはいりません。チェックボックス、ラジオボタンは比較的簡単、セレクトボックスは最初のoptionに""を入れるならvalで調整できます

tetutetutetu

2020/03/17 12:32

ご回答ありがとうございます。色んな方法があるのですね。勉強になりました！

行動規範の内容に同意します

これでいかがでしょうか。（動作検証はしていません）

JavaScript
1$(function () {
2  for (let i = 1 ; i <= 10 ; i++) {
3     let formSelector = '#form' + i;
4     let resetButtonSelector = formSelector + '_reset'; 
5
6    $(resetButtonSelector).click( function() {
7      $(formSelector).find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
8  }
9  return false;
10});
11

投稿2020/03/16 03:43

quadii.shii

総合スコア257

tetutetutetu

2020/03/17 12:32

ご回答ありがとうございました。

行動規範の内容に同意します

HTMLの構造を変えるのが簡単。

js
1$(function () {
2  $('.form_reset').click( function() {
3    $(this).parent().find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
4    // return false; // type="button"を指定したら多分いらない
5  });
6});

HTML
1<form action="/" method="POST">
2  <div id="form1" class="form_group">
3    <input type="text">
4    <label>
5      <input type="radio" value="ラジオ1">ラジオ1
6    </label>
7    <label>
8      <input type="radio" value="ラジオ2">ラジオ2
9    </label>
10    <button type="button" class="form_reset">入力内容をクリア</button><!-- .form_groupの中に移動 -->
11  </div>
12  <!-- <button id="form1_reset">入力内容をクリア</button>
13  ここのままやるなら $(this).parent() を $(this).prev() で。 -->
14  <div id="form2" class="form_group">
15    <input type="text">
16    <label>
17      <input type="check" value="チェックボックス1">チェックボックス1
18    </label>
19    <label>
20      <input type="check" value="チェックボックス2">チェックボックス2
21    </label>
22    <button type="button" class="form_reset">入力内容をクリア</button>
23  </div>
24  ・
25  ・
26  ・
27</form>

【buttonでsubmitさせない方法 - Qiita】
https://qiita.com/kazu56/items/b2e9c15942e04a6ffda9

投稿2020/03/16 12:37

kei344

総合スコア69606

tetutetutetu

2020/03/17 12:31

ご回答ありがとうございます。色んな方法があるのですね。勉強になりました！

行動規範の内容に同意します

jQuery のAPI関数で {string} 指定された引数は 文字列リテラルである必要はありません。
文字列を格納した変数 を渡しても動きます。

HTML
1<div id="a">ほげ</div>

javascript
1let selector = "#a";
2console.log( $(selector).html() ); // "ほげ"

連番が変わっていくだけなので繰り返し処理で

できそうな気がする

お察しの通りで、for 文なり、jQuery.each() なりで回しつつ、文字列処理したセレクタを渡すだけです。

投稿2020/03/16 04:11

AkitoshiManabe

総合スコア5434

tetutetutetu

2020/03/17 12:31

ご回答ありがとうございました。

行動規範の内容に同意します

ベストアンサー

こんにちは

全体が<form>のフォームですので、その中にある、各 #form1, #form2 のことを、この回答ではサブフォームと呼びます。

基本的な考え方としては、ご質問にある、サブフォーム１個だけをクリアする下記のコード

javascript
1$('#form1_reset').click( function() {
2    $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
3    return false;
4});

を、どのサブフォームのクリアボタンをクリックしたときも意図した動作をするように修正していけばよいかと思います。その際に、HTMLのほうもより良い形にしていく作業が発生するかもしれませんが、このご質問では、HTMLのほうの組み方（要素の階層構造）やidのフォーマット等を変更しなくてもjavascriptのコード修正のみで（とりあえずは）済ませることができるので、その修正手順を示します。

上記のサブフォーム#form1 をリセットするコードを以下のように修正します。

(1) リセットボタンのセレクタを、どのリセットボタンにも該当するように修正

修正前：

css
1#form1_reset

修正後：

css
1[id$="_reset"]

(2) クリアすべきサブフォームのidを(1)に該当したボタンのidから取得

リセットボタンのクリックハンドラの冒頭に以下を追加します。

追加：

javascript
1const formId = $(this).attr('id').replace('_reset', '');

上記によって、 formId には 'form1', 'form2' などの文字列が入ってくる想定です。

(3) クリア対象のサブフォームの特定に、(2)で得られたformId を使うように修正

修正前：

javascript
1$('#form1').find(…

修正後：

javascript
1$(`#${formId}`).find(…

上記３点の変更をまとめて書くと、以下のようになります。

diff
1- $('#form1_reset').click( function() {
2+ $('[id$="_reset"]').click( function() {
3+   const formId = $(this).attr('id').replace('_reset', '');
4-   $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
5+   $(`#${formId}`).find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
6    return false;
7});