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

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

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

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

Q&A

1回答

397閲覧

[rails5]form_with上で画像を選択し、その画像に指定した数字をデータベース上に保存したい。

kosuke_ikeura

総合スコア19

Ruby on Rails 5

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

0グッド

0クリップ

投稿2020/03/23 13:49

いつもお世話になっております
【環境】
Rails5.2.4.2
Ruby 2.5.1
MySQL 5.7

【やりたいこと】
モーダルフォーム上のform_withのデザインをこだわりたいです。
フォーム上で画像を選択し、submitボタンで送信したら、その画像に紐づけられている数字をデータベースに保存したいです。

具体的には、、
イメージ説明
上記の画像のようなデザインにしたいです。
(*これはデザインのために作成したphotoshopの画像です。実際にweb上でこのようには映りません。*)

赤いつぼは  status→1
黄色いつぼは status→2
青いつぼは  status→3
を設定し、アップデートボタンを押せばstatusカラムをupdateしたいと考えています。

【現状】
現状は、、
イメージ説明
動作確認のためにf.selectを使用しています。
1~3の数字を選択し、Update Flavorを押せば、ちゃんとstatusカラムがアップデートされることを確認済みです。

【わからないこと】
画像をボタンにすることです。今回は赤、黄色、青のツボをボタンにする方法です。最悪ラジオボタンを使用するのでもいいのですが、なぜかこれがうまくいきません。
さらに、その画像を選択し、送信すれば紐づいた数字をデータベースにアップデートする方法がわかりません。

【ソースコード】
MySQLより今回扱うFlavorモデルの詳細

MYSQL

1mysql> show columns from flavors; 2+----------------+--------------+------+-----+---------+----------------+ 3| Field | Type | Null | Key | Default | Extra | 4+----------------+--------------+------+-----+---------+----------------+ 5| id | bigint(20) | NO | PRI | NULL | auto_increment | 6| name | varchar(255) | YES | | NULL | | 7| purchase_price | int(11) | YES | | NULL | | 8| status | int(11) | YES | | NULL | | 9| image | text | YES | | NULL | | 10| created_at | datetime | NO | | NULL | | 11| updated_at | datetime | NO | | NULL | | 12| user_id | int(11) | YES | | NULL | | 13+----------------+--------------+------+-----+---------+----------------+ 148 rows in set (0.01 sec)

_form.html.erb

Rails

1<div class="modal__bg js-modal-close"> 2 <div class="modal__content"> 3 <%= form_with(model: @flavor, local: true) do |form| %> 4 <div class="modal-header"> 5 <h5 class="modal-title">ステータスを変更</h5> 6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 7 <span aria-hidden="true">&times;</span> 8 </button> 9 </div> 10 <div class="modal-body"> 11 #ここを画像を使用して希望のデザインを実装したい。 12 <div class="form-group field"> 13 <%= form.select :status, [1,2,3]%> 14 </div> 15 </div> 16 <div class="modal-footer actions"> 17 <%= form.submit class: "btn btn-danger" %> 18 <%= link_to "購入", new_flavor_path, class:"btn btn-primary" %> 19 </div> 20 <% end %> 21 </div> 22</div>

flavors_controller.rb

Rails

1def edit 2 @flavor = Flavor.find(params[:id]) 3 render 'edit.js.erb' 4 end 5 def update 6 @flavor = Flavor.find(params[:id]) 7 @flavor.update(flavor_params) 8 @flavors = Flavor.all.order(id: "ASC").page(params[:page]).per(10) 9 redirect_to flavors_path 10 end 11 12 private 13 def flavor_params 14 params.require(:flavor).permit(:name, :purchase_price, :image, :image_cache, :status).merge(user_id: current_user.id) 15 end

解決のため別のファイルを見たい場合はご指摘いただければ公開致します。
ぜひお力添えのほどよろしくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

button_tag type: 'button',class: "red_button" do 赤いボタン表示 end

でいけるかと

投稿2020/03/23 21:15

winterboum

総合スコア23284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問