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

Question

前提・実現したいこと

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

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

該当のソースコード

const confirm = () => {
  const form = document.getElementById("itemConfirm");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    var result = window.confirm('ボタンをクリック！');
    
    if( result ) {
        console.log('OKがクリックされました');
        document.getElementById("itemConfirm").submit();
    }
    else {
        console.log('キャンセルがクリックされました');
        let formElements = document.getElementById("itemSubmit");
        formElements.disabled = false;
    }
  });
};
window.addEventListener("load", confirm);

    <%= form_with model: @item, id: 'itemConfirm',local: true do |f| %>

//入力欄省略

    <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>

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

ちなみに、javascriptファイルの

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

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

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

追記

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

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

<div class="items-sell-contents">
  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>
    <%= form_with model: @item, id: 'itemConfirm',local: true do |f| %>
    <div class="new-items">
      <div class="weight-bold-text">
        商品名
        <span class="indispensable">必須</span>
      </div>
      <%= f.text_area :name, class:"items-text", id:"item-name", placeholder:"商品名（必須 40文字まで)", maxlength:"40" %>
      <div class="items-explain">
        <div class="weight-bold-text">
          商品の説明
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_area :text, class:"items-text", id:"item-info", placeholder:"商品の説明" ,rows:"7" ,maxlength:"1000" %>
      </div>
    </div>
    <div class="price-text">
      <span>価格</span>
      <span class="indispensable">必須</span>
    </div>
    <span class="sell-yen">¥</span>
    <%= f.text_field :price, class:"price-input", id:"item-price", placeholder:"例）300" %>
    <div class="sell-btn-contents">
      <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>
    </div>
  </div>
  <% end %>
</div>

追記#2

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

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

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

Comments

[kuma_kuma_]

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

[m.ts10806]

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

```HTML

[m.ts10806]

>「キャンセル」を押した際に「disabled」が付与され

そもそも提示されたコード内にはdisabledの付与がどこにも書かれていません。
再現しませんので、コードは全体をご提示いただけますか？

[beginner.tanaka]

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

[beginner.tanaka]

m.ts10806様
投稿のご指摘ありがとうございます。次回は、そのように対応させていただきます。

disabledの付与される時のgifを添付します。
また、コードも追記にて、記述させていただきます。
ご助力の程、よろしくお願いします。

[kuma_kuma_]

> 最終確認のためにダイヤログとして表示される事は
それはありますが、その時ダイヤログ上「よいですか？」と表示され
「OK」「キャンセル」が表示されるがふつうで
今回の内容が仕様として明らかにバグとなります。

私の場合ですが、このような明確なバグの実装は悪意ある人にとって有益な情報となりえるので
回答を控えさせていただきます。

[storm3]

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

[beginner.tanaka]

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

[beginner.tanaka]

storm3様
回答していただきありがとうございます。
出品ページのviewファイルに、「itemSubmit」というidは一つしかありませんでした。
また、他のファイルもみましたが同じidはありませんでした。

確認をさせていただきたいのですが、
railsの方のsubmitに、idを記述しているのですが、こちらの記述の仕方は問題ないのでしょうか？
↓↓↓
<%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>

Answer 1

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をしているので、ダメっぽいですね。失礼しました。

Comments

[beginner.tanaka]

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

Answer 2

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

Comments

[beginner.tanaka]

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