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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 5

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Q&A

解決済

2回答

2046閲覧

text_fieldの表示、非表示をしたい

chipot

総合スコア0

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 5

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

0グッド

0クリップ

投稿2021/05/14 08:12

text_fieldを、ページを読み込んだときは非表示、ボタンをクリックしたら表示できるようにしたい

Ruby on Rails で金額を入力して決済するシステム(Pay.jp使用)を作っています。
トーク上で金額を決定するため、同じページ上で金額を入力したい。しかし、使用する頻度が低いため、通常は金額入力画面を隠しておきたいという状況です。
text_field非表示→「購入~」ボタンを押す→text_field表示

発生している問題

二通りの方法を試しましたが、それぞれ欠落があります。

1.SCSSで実装
金額入力画面(text_field)が表示されない
イメージ説明
2.CoffeeScriptで実装
ページを読み込んだら、既に金額入力画面(text_field)が表示される
イメージ説明

該当のソースコード

1.SCSSの場合

ruby

1<div class = "hidden-box"> 2 <input type = "checkbox" id = "label1"> 3 <label for = "label1">購入が決まったらこちら</label> 4 <div class = "hidden-show"> 5 <%= form_with local: true, url: pay_rooms_path do |f| %> 6 金額:<%= f.text_field :amount %> 7 <script 8 type = "text/text/javascript" 9 src = "https://checkout.pay.jp" 10 class = "payjp-button" 11 data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>" 12 > 13 </script> 14 <%= f.submit "カードで支払う", class: "btn btn-primary" %> 15 <% end %> 16 </div> 17</div>

SCSS

1.hidden-box { 2 margin-top: 10px; 3 margin-bottom: 50px; 4 padding: 0; 5} 6 7.hidden-box label { 8 padding: 8px; 9 font-weight: bold; 10 color: #fff; 11 background-color: #ff0000; 12 border-radius: 5px; 13 cursor: ponter; 14 transition: 0.5s; 15} 16 17.hidden-box label:before { 18 display: inline-block; 19 content: '\f078'; 20 font-family: 'FontAwesome'; 21 padding-right: 5px; 22 transition: 0.2; 23} 24 25.hidden-box input:checked ~ label:before { 26 content: '\f00d'; 27 color: #fff; 28} 29 30.hidden-box input { 31 display: none; 32} 33 34.hidden-box .hidden-show { 35 height: 0px; 36 padding: 0px; 37 opacity: 0; 38 transition: 0.8s; 39} 40 41.hidden-box input:checked ~ .hidden-show { 42 padding-top: 10px; 43 height: auto; 44 opacity: 1; 45}

2.CoffeeScriptの場合

ruby

1<button class = "button">購入が決まったらこちら</button> 2<div class = "target"> 3 <input class = "amount-area" type = 'hidden'> 4 <%= form_with local: true, url: pay_rooms_path do |f| %> 5 金額:<%= f.text_field :amount %> 6 <script 7 type = "text/text/javascript" 8 src = "https://checkout.pay.jp" 9 class = "payjp-button" 10 data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>" 11 > 12 </script> 13 <%= f.submit "カードで支払う", class: "btn btn-primary" %> 14 <% end %> 15</div>

CoffeeScript

1$(document).on 'turbolinks:load', -> 2 $target = document.querySelector('.target') 3 $button = document.querySelector('.button') 4 $button.addEventListener 'click', -> 5 $target.classList.toggle 'hidden' 6 return

SCSS

1.target { 2 background-color: #ea3345; 3 padding: 10px; 4 line-height: 1.5; 5 transition: 6 padding-top 500ms, 7 line-height 500ms; 8} 9.target.hidden { 10 padding-top: 0; 11 padding-bottom: 0; 12 line-height: 0; 13 pointer-events: none; 14 opacity: 0; 15 display: none; 16 visibility: hidden; 17 18}

試したこと

SCSS

  • valibilityの使用
  • form_withの位置を移動、class追加

CoffeeScript

  • $targetの前に.hide()を使用→ボタンを押しても表示されなくなる

補足情報(FW/ツールのバージョンなど)

どちらの方法でも大丈夫ですので、ご回答よろしくお願いします。
(CoffeeScript(+JavaScript)の知識は特に乏しいので、理解に時間がかかります。ご了承ください)

  • Ruby 2.6.3
  • Rails 5.2.4.5

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

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

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

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

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

guest

回答2

0

自己解決

回答をヒントに別の検索をしましたら、答えにつながりました。

ruby

1<input type = "button" value = "購入が決まったらこちら" onclick = "clickBtn1()" /> 2<div id = "p1"> 3 <%= form_with local: true, url: pay_rooms_path do |f| %> 4 金額:<%= f.text_field :amount %> 5 <script 6 type = "text/text/javascript" 7 src = "https://checkout.pay.jp" 8 class = "payjp-button" 9 data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>" 10 > 11 </script> 12 <%= f.submit "カードで支払う", class: "btn btn-primary" %> 13 <% end %> 14</div>

CoffeeScript

1$(document).on 'turbolinks:load', -> 2 document.clickBtn1 = -> 3 p1 = document.getElementById('p1') 4 if p1.style.display == 'block' 5 p1.style.display = 'none' 6 else 7 p1.style.display = 'block' 8 return 9 10 document.getElementById('p1').style.display = 'none'

投稿2021/05/14 15:53

chipot

総合スコア0

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

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

0

<div class = "target"> を非表示にしておけば画面を開いたときは見えずボタンおしてトグルしてくれるようになるかと。

投稿2021/05/14 13:16

winterboum

総合スコア23284

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

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

chipot

2021/05/14 15:44

ご回答いただきまして、ありがとうございました。 <div class = "target">を非表示にしました。最初は非表示になりましたが、ボタンを押しても非表示のままでした。わたしの理解不足で申し訳ありません。
winterboum

2021/05/15 00:07

jaavascliptとかcssとかは不得意なので、、、 どのように見えなくしたか、でどのように見えるようにするか、は変わってくるのかも。 トグルでの切り替えはくわしくないです。 ので私は 次のようにしています CSSに .hide {display: none;} 定義して、はじめは見せたくない要素に class='hide'をつけておく ボタンを押したら removeClass('hide') する
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問