teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

修正内容を追記として記述。

2020/10/05 00:25

投稿

beginner.tanaka
beginner.tanaka

スコア23

title CHANGED
File without changes
body CHANGED
@@ -8,10 +8,43 @@
8
8
  「disabled」の解除方法を教えていただきたいです。
9
9
  よろしくお願いします。
10
10
 
11
-
12
11
  ### 該当のソースコード
13
- javascriptファイルの実行されるコードです。
14
12
 
13
+ ```
14
+ const confirm = () => {
15
+ const form = document.getElementById("itemConfirm");
16
+ form.addEventListener("submit", (e) => {
17
+ e.preventDefault();
18
+
19
+ var result = window.confirm('ボタンをクリック!');
20
+
21
+ if( result ) {
22
+ console.log('OKがクリックされました');
23
+ document.getElementById("itemConfirm").submit();
24
+ }
25
+ else {
26
+ var redirect_url ="/items/new";
27
+ console.log('キャンセルがクリックされました');
28
+ let formElements = document.forms.contactForm;
29
+ formElements.submit.disabled = false;
30
+ }
31
+ });
32
+ };
33
+ window.addEventListener("load", confirm);
34
+ ```
35
+ ### 追記
36
+ コメントを頂き修正しました。しかし「disabled」が解除されません。
37
+ どこが間違っているのでしょうか?よろしくお願いします。
38
+
39
+ 追記内容
40
+ ・document.forms.contactForm; を
41
+  document.getElementById("itemSubmit");に修正。
42
+
43
+ ・formElements.submit.disabled = false; のsubmitを削除
44
+
45
+ .erbファイルのform_withのsubmitにidを追加
46
+ <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>
47
+
15
48
  ```ここに言語名を入力
16
49
  javascriptファイル
17
50
 
@@ -27,7 +60,7 @@
27
60
  document.getElementById("itemConfirm").submit();
28
61
  }
29
62
  else {
30
-
63
+ console.log('キャンセルがクリックされました');
31
64
  let formElements = document.getElementById("itemSubmit");
32
65
  formElements.disabled = false;
33
66
  }
@@ -49,6 +82,5 @@
49
82
  ```
50
83
 
51
84
  上記の記述で、disabledは解除できると思うのですが、解除できませんでした。
52
- キャンセルを押したら、そのページには留まるのですが、何も入力できない状況です。
53
85
 
54
86
  よろしくお願いいたします。

2

else内をformElements.submit.disabled = false; から formElements.disabled = false;に変更

2020/10/05 00:25

投稿

beginner.tanaka
beginner.tanaka

スコア23

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ 練習で商品の出品アプリを作っています。
3
- ボタンを押すと、javascriptでイベントが発火し、ダイヤログが表示されるようになっています。
4
+ 出品ボタンを押すと、javascriptでイベントが発火し、「OK」か「キャンセル」のダイヤログが表示されるようになっています。
5
+ OKであれば、トップページに画面繊維。キャンセルであれば、入力した内容が残った状態で、そのページに留まる。
6
+ というのを実現したいのですが、「キャンセル」を押した際に「disabled」が付与され、何も入力できない状態となっています。
4
7
 
5
- ここで、「キャンセル」を押すと、現在のページに留まるようになっているのですが、ここから再度、
6
- ボタンを押そうとしても、「disabled」が解除されていない為、押すことができません。
7
- の解除の仕方を教えていただきたいです。
8
+ 「disabled」の解除方を教えていただきたいです。
9
+ よろしくお願いします。
8
10
 
9
11
 
10
12
  ### 該当のソースコード
@@ -25,13 +27,10 @@
25
27
  document.getElementById("itemConfirm").submit();
26
28
  }
27
29
  else {
28
- console.log('キャンセルがクリックされました');
30
+
29
- let formElements = document.forms.contactForm;
31
+ let formElements = document.getElementById("itemSubmit");
30
- formElements.submit.disabled = false;
32
+ formElements.disabled = false;
31
-
32
33
  }
33
-
34
-
35
34
  });
36
35
  };
37
36
  window.addEventListener("load", confirm);
@@ -42,11 +41,14 @@
42
41
 
43
42
  .erbファイル
44
43
 
45
- <%= form_with(model: @item, id: 'itemConfirm', html:{name: "contactForm"},local: true) do |f| %>
44
+ <%= form_with model: @item, id: 'itemConfirm',local: true do |f| %>
45
+
46
+ //入力欄省略
47
+
48
+ <%= f.submit "出品する" ,class:"sell-btn" , id: "itemSubmit"%>
46
49
  ```
47
50
 
48
51
  上記の記述で、disabledは解除できると思うのですが、解除できませんでした。
49
- よろくお願いいます。
52
+ キャンセルを押したら、そのページには留るのでが、何も入力できない状況です
50
53
 
51
- 画像追加
54
+ よろしくお願いいたします。
52
- ![イメージ説明](78d9d9a271f473432f3231830a95229c.png)

1

画像追加

2020/10/04 23:54

投稿

beginner.tanaka
beginner.tanaka

スコア23

title CHANGED
File without changes
body CHANGED
@@ -46,4 +46,7 @@
46
46
  ```
47
47
 
48
48
  上記の記述で、disabledは解除できると思うのですが、解除できませんでした。
49
- よろしくお願いいたします。
49
+ よろしくお願いいたします。
50
+
51
+ 画像追加
52
+ ![イメージ説明](78d9d9a271f473432f3231830a95229c.png)