質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 290

ueueue2015

score 31

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

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

<form action="/" method="POST">
  <div id="form1">
    <input type="text">
    <label>
      <input type="radio" value="ラジオ1">ラジオ1
    </label>
    <label>
      <input type="radio" value="ラジオ2">ラジオ2
    </label>
  </div>
  <button id="form1_reset">入力内容をクリア</button>
  <div id="form2">
    <input type="text">
    <label>
      <input type="check" value="チェックボックス1">チェックボックス1
    </label>
    <label>
      <input type="check" value="チェックボックス2">チェックボックス2
    </label>
  </div>
  <button id="form2_reset">入力内容をクリア</button>
  ・
  ・
  ・
</form>
$(function () {
  $('#form1_reset').click( function() {
    $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
    return false;
  });

  $('#form2_reset').click( function() {
    $('#form2').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
    return false;
  });

  $('#form3_reset').click( function() {
    $('#form3').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
    return false;
  });

  ・
  ・
  ・
  ・
});

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/03/16 12:21

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

    キャンセル

  • yambejp

    2020/03/16 12:42 編集

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

    キャンセル

  • ueueue2015

    2020/03/16 21:26

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

    キャンセル

回答 5

+3

考え方によります

  • reset処理を選べば初期状態に戻すことは可能

  • 初期状態が必ずしも空ではないものを空にするには適当なclassで対象かどうかを指定して処理する

  • codepen

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/16 12:43

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

    キャンセル

  • 2020/03/16 21:52

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

    キャンセル

  • 2020/03/17 21:32

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

    キャンセル

+2

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

$(function () {
  for (let i = 1 ; i <= 10 ; i++) {
     let formSelector = '#form' + i;
     let resetButtonSelector = formSelector + '_reset'; 

    $(resetButtonSelector).click( function() {
      $(formSelector).find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
  }
  return false;
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/17 21:32

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

    キャンセル

+1

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

<div id="a">ほげ</div>
let selector = "#a";
console.log( $(selector).html() ); // "ほげ"

連番が変わっていくだけなので繰り返し処理で
できそうな気がする

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/17 21:31

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

    キャンセル

+1

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

$(function () {
  $('.form_reset').click( function() {
    $(this).parent().find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false);
    // return false; // type="button"を指定したら多分いらない
  });
});
<form action="/" method="POST">
  <div id="form1" class="form_group">
    <input type="text">
    <label>
      <input type="radio" value="ラジオ1">ラジオ1
    </label>
    <label>
      <input type="radio" value="ラジオ2">ラジオ2
    </label>
    <button type="button" class="form_reset">入力内容をクリア</button><!-- .form_groupの中に移動 -->
  </div>
  <!-- <button id="form1_reset">入力内容をクリア</button>
  ここのままやるなら $(this).parent() を $(this).prev() で。 -->
  <div id="form2" class="form_group">
    <input type="text">
    <label>
      <input type="check" value="チェックボックス1">チェックボックス1
    </label>
    <label>
      <input type="check" value="チェックボックス2">チェックボックス2
    </label>
    <button type="button" class="form_reset">入力内容をクリア</button>
  </div>
  ・
  ・
  ・
</form>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/17 21:31

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

    キャンセル

checkベストアンサー

0

こんにちは

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

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

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


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

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

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

修正前:

#form1_reset

修正後:

[id$="_reset"]

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

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

追加:

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


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

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

修正前:

$('#form1').find(…

修正後:

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

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

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

上記によってとりあえず、JavaScriptの修正だけで済ませることはできますが、HTMLについて

  • 入力要素だけではなくリセットボタンも包含したくくりをサブフォームとするように、HTMLの階層を修正する。
  • id ではなく class を使う。

といった改善の余地があり、これらの改善に合わせてjavascriptのコードのほうも見通しが良くなっていくと思います。

以上、参考になれば幸いです。

補足

上記に回答した修正後のコードによって、サブフォームが何個あっても対応できます。以下はサブフォームが30個ある例です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/17 21:33

    ご回答ありがとうございます。期待通りの動作になりました!本当に助かりました。

    キャンセル

  • 2020/03/17 22:40

    どういたしまして。
    > 期待通りの動作になりました!
    とのことでよかったです👏

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる