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

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

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

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

JavaScript

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

Q&A

解決済

2回答

770閲覧

ダイヤログを表示させ、キャンセルだった場合、再度入力できる状態にしたいです。

beginner.tanaka

総合スコア23

Ruby on Rails

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

JavaScript

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

0グッド

0クリップ

投稿2020/10/05 04:22

編集2020/10/05 09:23

前提・実現したいこと

練習で商品の出品アプリを作っています。
出品ボタンを押すと、javascriptでイベントが発火し、「OK」か「キャンセル」のダイヤログが表示されるようになっています。
OKであれば、トップページに画面繊維。キャンセルであれば、入力した内容が残った状態で、そのページに留まる。
というのを実現したいのですが、「キャンセル」を押した際に「disabled」が付与され、何も入力できない状態となっています。

「disabled」の解除方法を教えていただきたいです。
よろしくお願いします。

該当のソースコード

javascript

1 2const confirm = () => { 3 const form = document.getElementById("itemConfirm"); 4 form.addEventListener("submit", (e) => { 5 e.preventDefault(); 6 7 var result = window.confirm('ボタンをクリック!'); 8 9 if( result ) { 10 console.log('OKがクリックされました'); 11 document.getElementById("itemConfirm").submit(); 12 } 13 else { 14 console.log('キャンセルがクリックされました'); 15 let formElements = document.getElementById("itemSubmit"); 16 formElements.disabled = false; 17 } 18 }); 19}; 20window.addEventListener("load", confirm);

rails

1 2 <%= form_with model: @item, id: 'itemConfirm',local: true do |f| %> 3 4//入力欄省略 5 6 <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>

上記の記述で、disabledは解除できると思うのですが、解除できませんでした。

ちなみに、javascriptファイルの

const form = document.getElementById("itemConfirm");

の、**getElementById("itemConfirm");をgetElementById("itemSubmit");に変更すると、
「disabled」は消えるのですが、ダイヤログが表示されなくなりました。
**

よろしくお願いいたします。

追記

[disabledが解除されませんリンクはGyazoGifのリンクになります。
GyazoGif

以下、railsのコードになります。

rails

1<div class="items-sell-contents"> 2 <div class="items-sell-main"> 3 <h2 class="items-sell-title">商品の情報を入力</h2> 4 <%= form_with model: @item, id: 'itemConfirm',local: true do |f| %> 5 <div class="new-items"> 6 <div class="weight-bold-text"> 7 商品名 8 <span class="indispensable">必須</span> 9 </div> 10 <%= f.text_area :name, class:"items-text", id:"item-name", placeholder:"商品名(必須 40文字まで)", maxlength:"40" %> 11 <div class="items-explain"> 12 <div class="weight-bold-text"> 13 商品の説明 14 <span class="indispensable">必須</span> 15 </div> 16 <%= f.text_area :text, class:"items-text", id:"item-info", placeholder:"商品の説明" ,rows:"7" ,maxlength:"1000" %> 17 </div> 18 </div> 19 <div class="price-text"> 20 <span>価格</span> 21 <span class="indispensable">必須</span> 22 </div> 23 <span class="sell-yen">¥</span> 24 <%= f.text_field :price, class:"price-input", id:"item-price", placeholder:"例)300" %> 25 <div class="sell-btn-contents"> 26 <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%> 27 </div> 28 </div> 29 <% end %> 30</div>

追記#2

debuggerで確認したところ、disabledは一度解除されていることがわかりました。
しかし、rails-ujs-jsというファイルで、disabledが追加されていることが分かりました。
このファイルは、javascriptをを使用する際に作られるファイルで編集しようがない場所になると思うのですが、これはどうにかなるものなのでしょうか??

disabledが解除されているところ
https://gyazo.com/70bbb3493926b43bdb83ad4710d13efe

rails-ujs-jsファイルで、disabledが追加されているところ
https://gyazo.com/cf2a087c6378fcd1edc46d68ff37cf93

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

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

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

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

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

kuma_kuma_

2020/10/05 05:15

> キャンセルであれば、入力した内容が残った状態で、そのページに留まる。 これ出品以外に方法がないですよね?それにこの様な動作自体すでに「キャンセル」ではないと思いますが
m.ts10806

2020/10/05 05:40 編集

コードブロック内にはコードのみをご提示ください コードブロックの冒頭に言語名を書けばそれでわかりますし 既定の言語であれば適切にハイライトされます。 ```JavaScript ```HTML
m.ts10806

2020/10/05 05:47

>「キャンセル」を押した際に「disabled」が付与され そもそも提示されたコード内にはdisabledの付与がどこにも書かれていません。 再現しませんので、コードは全体をご提示いただけますか?
beginner.tanaka

2020/10/05 06:27

kuma_kuma_様 おっしゃる通り、出品以外に方法はないですが、最終確認のためにダイヤログとして表示される事は、どのアプリでもあるので、練習として実装してみたいなと思い今やっている状況です。無意味な実装であるとは思いますがご助力のほどいただけると幸いです。
beginner.tanaka

2020/10/05 07:56 編集

m.ts10806様 投稿のご指摘ありがとうございます。次回は、そのように対応させていただきます。 disabledの付与される時のgifを添付します。 また、コードも追記にて、記述させていただきます。 ご助力の程、よろしくお願いします。
kuma_kuma_

2020/10/05 07:11

> 最終確認のためにダイヤログとして表示される事は それはありますが、その時ダイヤログ上「よいですか?」と表示され 「OK」「キャンセル」が表示されるがふつうで 今回の内容が仕様として明らかにバグとなります。 私の場合ですが、このような明確なバグの実装は悪意ある人にとって有益な情報となりえるので 回答を控えさせていただきます。
storm3

2020/10/05 07:14

よくあることとしては、itemSubmitが同じHTMLで他にも宣言されている場合でしょうか。 複数同じIDがあると、最初にみつかったものが処理対象になります。 itemSubmitのIDが複数あるということはありませんか?
beginner.tanaka

2020/10/05 07:50

kuma_kuma様 かしこまりました。回答していただきありがとうございました。 自身の知識不足ゆえ、不快な想いをさせてしまい申し訳ございません。
beginner.tanaka

2020/10/05 07:56

storm3様 回答していただきありがとうございます。 出品ページのviewファイルに、「itemSubmit」というidは一つしかありませんでした。 また、他のファイルもみましたが同じidはありませんでした。 確認をさせていただきたいのですが、 railsの方のsubmitに、idを記述しているのですが、こちらの記述の仕方は問題ないのでしょうか? ↓↓↓ <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>
guest

回答2

0

ベストアンサー

Railsに詳しくない、かつ試せてもいないので確実な回答にはなりませんが、こちらが参考になるのではないでしょうか。
https://qiita.com/jumpyoshim/items/4c06ce27c5140e6aebae

disabledが付与されるのは、上記URLにあるように「data-disable-with」のdata属性が付与されていることが条件のようですので、
キャンセルを選択した後は「data-disable-with」があれば、「data-disable-with」を削除して、
OKを選択した後は「data-disable-with」がなければ、「data-disable-with」を付与という
処理の流れで実現できるのではないでしょうか。

--追記
上記の回答を書いてみたものの、実際rails-ujs-jsを調べてみたら
「data-disable-with」の有り無しにかかわらず、element.disabled = trueをしているので、ダメっぽいですね。失礼しました。

投稿2020/10/05 09:17

編集2020/10/05 09:54
storm3

総合スコア328

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

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

beginner.tanaka

2020/10/05 10:36

解決しました! storm3様からdata-disable-withについて情報を知り、そこから調べたら下記のURLに行き着きました。 https://qiita.com/HrsUed/items/795799f511f5717c181a そこで、同様の記述をしたところ、解決することができました! 頂いたURLから発見できましたので、ベストアンサーにさせていただきます!
guest

0

これみたいに、最初はdisabled: trueを設定しておくのはダメでしょうか?
https://qiita.com/taKassi/items/c0a4367433fe4cd62171

投稿2020/10/05 08:02

firegrape

総合スコア902

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

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

beginner.tanaka

2020/10/05 09:11

回答していただきありがとうございます! 実際に頂いたURLの元やってみましたが、ダメでした。 debuggerで確認したところ、disabledは一度解除されていることがわかりました。 しかし、rails-ujs-jsというファイルで、disabledが追加されていることが分かりました。 このファイルは、javascriptをを使用する際に作られるファイルで編集しようがない場所になると思うのですが、これはどうにかなるものなのでしょうか?? 追記としてgifを投稿しています。よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問