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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

【Rails6】ブラウザで取得したvalueをサーバーサイドに送りたい

izu_reco
izu_reco

総合スコア2

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

1評価

1クリップ

133閲覧

投稿2022/05/10 13:33

現在、一度の投稿で複数レコードを登録する機能を実装しています。

具体的に以下機能を実現したいと考えています。
❶ 食材をカテゴリ毎(魚/肉/飲料など)に入力欄を設ける。カテゴリは、タブで変更する。
❷ 例) 魚カテゴリを選択し、入力されたレコードには、魚カテゴリのidを付与したい。
❸ カテゴリのidは、jQueryを用いて、タブがクリックされると、自動的に取得できるよう実装している。
❹ カテゴリのidは、"hidden_field"で隠し、idだけサーバーサイドに送ろうとしている。
Image from Gyazo

困りごと

上記❸❹の「カテゴリidをタブ切り替えごとに取得」して、フォームの送信と共に「サーバーサイドまで送る」ことは成功していますが、idが初めのレコードにしか反映されません

Image from Gyazo
繰り返しとなりますが、やりたいことは、食材のカテゴリに応じてidを付与したい(魚のタブから入力したのであれば、魚のカテゴリidが保存したい)のです。なぜ、初めのレコードにしか付与されないのでしょうか。お知恵をお貸しいただきたくお願いいたします。

Version

Ruby on Rails 6
jQuery 3.6.0

該当のソースコード

HTML

html

<div class="content-area"> <%= form_with model: @form, url: box_foods_path, method: :post, local: true do |form| %> <%= render 'shared/foods_error_messages', model: @form %> <div class="content show"> <%= render partial: 'shared/fields_for', locals:{ form: form } %> </div> <div class="content"> <%= render partial: 'shared/fields_for', locals:{ form: form } %> </div> <div class="content"> <%= render partial: 'shared/fields_for', locals:{ form: form } %> </div> <div class="content"> <%= render partial: 'shared/fields_for', locals:{ form: form } %> </div> <div class="content"> <%= render partial: 'shared/fields_for', locals:{ form: form } %> </div> <div class="sell-btn-contents"> <%= form.submit "登録する" ,class:"sell-btn", id:"food-btn" %> <%=link_to 'もどる', root_path, class:"back-btn" %> </div> <% end %> </div>

render(フォーム表示部分)

Ruby

<h2>選択されている食材カテゴリ : <i class="fa-solid fa-fish"></i>Fish </h2> <table class="item-table"> <thead> <tr class="item-tr"> <th>登録</th> <th>食材名</th> <th>個数</th> <th>購入日</th> <th>消費期限</th> <th>購入価格</th> </tr> </thead> <%# TODO : フォーム追加できるようにする。https://web-tsuku.life/add-form-appendchild/ %> <tbody> <%= form.fields_for :foods do |f| %> <tr class="item-tr"> <td><%= f.check_box :availability, {}, "true", "false" %></td> <td><%= f.text_field :food_title %></td> <td><%= f.number_field :number_title, min: 1, max: 99 %></td> <td><%= f.date_field :purchase_date %></td> <td><%= f.date_field :expiry_date %></td> <td><%= f.text_field :price %></td> <td><%= f.hidden_field :category_id, id:"send-data" %></td> </tr> <% end %> </tbody> </table>

jQuery

  • 押下されたタブに応じて、hidden_fieldのvalueを書き換えています。

Javascript

$(function() { let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義 let tab_id = 1 $(".tab").on("click", function() { // tabをクリックしたらイベント発火 $(".active").removeClass("active"); // activeクラスを消す $(this).addClass("active"); // クリックした箇所にactiveクラスを追加 const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義 $(".content").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加 }) $("#tab-fish.tab").on("click", function(){ // どのタブが選択されたか判断 tab_id = $("#tab-fish.tab").data("value"); $("#send-data").val(tab_id) }); $("#tab-veg.tab").on("click", function(){ // タブのIDを取得 tab_id = $("#tab-veg.tab").data("value"); $("#send-data").val(tab_id) debugger; }); })

Foods Controller

  • こちらでnew/createアクションを定義しています。
  • Formオブジェクトを組んで、複数レコードが登録できるよう実装しています。

Ruby

class FoodsController < ApplicationController def new # @form = Form::FoodCollection.new(params[:box_id]) @form = Form::FoodCollection.new end def create @form = Form::FoodCollection.new(food_collection_params) binding.pry if @form.save == true redirect_to root_path, notice: "商品を登録しました" else render :new end end def edit end def update end def show end private def food_collection_params params.require(:form_food_collection) .permit(foods_attributes: [:availability, :food_title, :number_title, :purchase_date, :expiry_date, :price, :give_id, :category_id]) .merge( box_id: params[:box_id] ) end end

Formオブジェクト

Ruby

class Form::FoodCollection < Form::Base FORM_COUNT = 3 #ここで、作成したい登録フォームの数を指定 attr_accessor( :foods, :availability, :food_title, :number_title, :purchase_date, :expiry_date, :price, :give_id, :category_id, :box_id ) # foodsに作成したモデルが格納される with_options presence: true do validates :food_title validates :number_title validates :purchase_date validates :expiry_date validates :price end # 初期化メソッド def initialize(attributes = {}) super attributes self.foods = FORM_COUNT.times.map { Food.new() } unless self.foods.present? end def foods_attributes=(attributes) self.foods = attributes.map { |_, v| Food.new(v) } end def save is_success = true ava_count = 0 Food.transaction do self.foods.each do |food| food.valid? if food.availability f = Food.new(box_id: box_id) food.box_id = f.box_id is_success = false unless food.save ava_count += 1 end end if ava_count == 0 is_success = false end raise ActiveRecord::RecordInvalid unless is_success end rescue p 'error' ensure return is_success end end

自分で調べたことや試したこと

仮説
fields_forを用いると、欄への記載に関わらず「生成された入力欄が全てサーバーサイドに送られる」ため、カテゴリidが希望のレコードに付与されない?
ただし、もしそうであれば、その他の入力項目も正しく保存されないはずだが、jQueryで取得したカテゴリidのみ、おかしな挙動をしている。

長文かつ分かりにくい箇所があるかと思いますが、何卒よろしくお願いします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。