Zenn
📚

【Rails、JQuery】フォーム入力した値を動的にチェックボックスで追加する方法【メモ】

2022/02/06に公開
JavaScript
jQuery
Rails
tech

やりたいこと

  • フォームに値を入力し、追加ボタンを押すと、入力した値を持ったチェックボックスが追加される
  • 複数追加OK(複数の値をサーバーに渡す)
  • 追加後、フォームの値はリセット
  • 空欄NG
  • 重複NG

↓↓完成イメージ

完成コード

viewファイル
<div class="search-tag-form">
  <span>
    <%# 文字を入力するためだけのフィールド。入力された値は送信する必要がないので、nameの指定はしていない。%>
    <%= text_field_tag nil, nil, {class: "search-tag-field"} %>
  </span>
  <span class="add-search-tag">追加</span>
</div>
javascriptファイル
$(function () {
  var search_tag_field = '.search-tag-field'
  var search_tag_form = '.search-tag-form'

  // 追加ボタンを押した時の処理(入力された内容を元にチェックボックスを随時追加)
  var add_search_tag = function () {
    // エラーメッセージが存在する場合、削除
    if ($(".tag-alert").length) {
      $(".tag-alert").remove()
    }
    // 入力内容を取得added_tags
    tag_name = $(search_tag_field).val().trim()
    // 追加済みのタグを詰め込む箱
    added_tags = []
    // 追加済みのタグを取得して配列に詰め込む
    $(".tag-label").each(function () {
      added_tags.push($(this).text().trim())
    });

    // 追加済みのタグと追加予定のタグの重複チェック
    is_duplicate = added_tags.some(value => value === tag_name)

    // 空ではなく、追加済みのタグと重複していない場合、追加
    if (tag_name && !is_duplicate) {
      // パラメータで渡す際に値が被るのを防ぐため現時刻を取得(被っていると統合されて複数渡せないため)
      var id = new Date().getTime();

      // 検索タグを登録できるチェックボックスを追加(入力内容を保持)
      $(search_tag_form).before($(`<label class="tag-label"><input class='tag-input' type='checkbox' checked='checked'  name='job[search_tags_attributes][${id}][name]' value=${tag_name}>${' ' + tag_name}</label>`))

      // チェックボックス追加後、入力フォームをリセット
      $(search_tag_field).val('')
    }
    // 追加済みのタグと重複している場合、エラーメッセージを表示
    if (is_duplicate) {
      $(search_tag_form).after($(`<p class="tag-alert">※既に存在するタグです。</p>`))
    }
  }
 $('.add-search-tag').on('click', add_search_tag); //追加イベント発火
}

処理の内容としては、コメント通りです。

僕の場合は、募集（job）の中に検索タグ(search_tag)をネストしたいので上記のようにしています。
結果↓↓

パラメーター
Parameters: { "job"=>{省略 , "search_tags_attributes"=>{"1644084312487"=>{"name"=>"検索タグ"}, "1644084320258"=>{"name"=>"呪術廻戦"}, "1644084324062"=>{"name"=>"ワンピース"}}},}

注意点

Discussion