javascriptのdisabledの解除方法を教えてください。

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 {
        var redirect_url ="/items/new";
        console.log('キャンセルがクリックされました');
        let formElements = document.forms.contactForm;
        formElements.submit.disabled = false;
    }
  });
};
window.addEventListener("load", confirm);

追記

コメントを頂き修正しました。しかし「disabled」が解除されません。
どこが間違っているのでしょうか？よろしくお願いします。

追記内容
・document.forms.contactForm;　を
document.getElementById("itemSubmit");に修正。

・formElements.submit.disabled = false;　のsubmitを削除

.erbファイルのform_withのsubmitにidを追加
<%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>

javascriptファイル

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);

.erbファイル

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

//入力欄省略

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

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

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

Answer 1

document.formsを使ってフォーム要素を参照するのは古いやり方です（正しいかどうかは、与えられた情報が不足していて判断できません）。

submitボタンにidを振っておいて、document.getElementByIdで取得するようにしましょう。

Comments

[beginner.tanaka]

回答していただきありがとうございます！！
ですが、disabledが解除されません。。。
記述の仕方が間違っているのでしょうか？？

理解することができず申し訳ございません。
よろしくお願いいたします。

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

var result = window.confirm('ボタンをクリック！');

if( result ) {
let formElements = document.getElementById("itemSubmit");
formElements.submit.disabled = true;
console.log('OKがクリックされました');
document.getElementById("itemConfirm").submit();
}
else {
console.log('キャンセルがクリックされました');
let formElements = document.getElementById("itemSubmit");
formElements.submit.disabled = false;

}

});
};
window.addEventListener("load", confirm);
```

```
.erbファイル
<%= form_with(model: @item, id: 'itemConfirm',local: true) do |f| %>

//中略

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

[maisumakun]

formElements.submit.disabledの「.submit」が不要です。

[beginner.tanaka]

ご指摘ありがとうございます！

disabledを解除することができましたが、ダイヤログが表示されなくなりました。。。。。
いろいろ操作した結果、２パターンありますがどちらもうまくいきません。
パターン１　disabledが消えるが、ダイヤログがでなくなる。
パターン２　disabledが残り、ボタンが押せなくなる。

パターン１
const form で定義したgetElementByIdを【railsのsubmit】のidにするパターンです。
これですと、ダイヤログが出なくなります。

ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー
JS
const confirm = () => {
const form = document.getElementById("itemSubmit");
form.addEventListener("submit", (e) => {
//中略
else {
let formElements = document.getElementById("itemSubmit");
formElements.disabled = false;
console.log('キャンセルがクリックされました');
}
ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　ー　
rails
<%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

パターン２
const form で定義したgetElementByIdを【form_with】のidにするパターンです。
これですと、disabledが残り、ボタンが押せなくります。

const confirm = () => {
const form = document.getElementById("itemConfirm");
//中略
else {
let formElements = document.getElementById("itemSubmit");
formElements.disabled = false;
console.log('キャンセルがクリックされました');
}

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

[m.ts10806]

上記、現状として質問本文に追記してください。
コメントではマークダウン使えませんし、ほかの回答者からすると質問本文が全てなのでgetElementByIdを使ったやり方で進んでいるとは伝わりません。

[beginner.tanaka]

ご指摘、ありがとうございます！
質問本文に修正内容を書かせていただきます。

[m.ts10806]

あのできれば「現状として追記」してほしかったのですが。。。
この回答が「存在ない情報に対しての回答」になってしまっています。

[beginner.tanaka]

ご指摘ありがとうございます！
前回の情報に戻し、追記として記述させて頂きました。
よろしくお願い致します。

[beginner.tanaka]

disabledの解除はできましたので、maisumakun様をベストアンサーにさせていただきます！