teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問formのonSubmitにfalseを指定しても画面全更新が発生する場合がある

編集履歴

質問編集履歴

4

コード修正

2020/10/25 06:40

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,8 @@
56
56
 
57
57
  ### 今のコード
58
58
 
59
+ [jsfiddle](https://jsfiddle.net/0yzerw29/)
60
+
59
61
  ```HTML5
60
62
 
61
63
  <form action="#" onSubmit="onOkButton();return false;">
@@ -72,125 +74,123 @@
72
74
 
73
75
  ```JavaScript
74
76
 
75
- var reqTimeout = 10000;
77
+ var reqTimeout = 10000;
76
78
 
77
- var reqURL = 'XXX/XXX'
79
+ var reqURL = 'XXX/XXX'
78
80
 
79
- function onOkButton(){
80
81
 
81
- set();
82
82
 
83
- }
83
+ function onOkButton() {
84
84
 
85
- function set(){
85
+ set();
86
86
 
87
- var setWL4,setWL3,setWL2,setWL1;
87
+ }
88
88
 
89
- var input_WL_Lv4 = document.getElementById('input_WL_Lv4');
90
89
 
91
- var input_WL_Lv3 = document.getElementById('input_WL_Lv3');
92
90
 
93
- var input_WL_Lv2 = document.getElementById('input_WL_Lv2');
91
+ function set() {
94
92
 
95
- var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
93
+ var setWL1;
96
94
 
97
- if (input_WL_Lv4) setWL4 = Number.parseFloat(input_WL_Lv4.value);
95
+ var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
98
96
 
99
- if (input_WL_Lv3) setWL3 = Number.parseFloat(input_WL_Lv3.value);
100
97
 
101
- if (input_WL_Lv2) setWL2 = Number.parseFloat(input_WL_Lv2.value);
102
98
 
103
- if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
99
+ if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
104
100
 
105
- postData2Server(reqURL,
101
+ postData2Server(reqURL, {
106
102
 
107
- {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
103
+ "WL_Lv1": setWL1
108
104
 
109
- reqTimeout,
105
+ },
110
106
 
111
- {
107
+ reqTimeout, {
112
108
 
113
- 'onSuccess': function(resp) {
109
+ 'onSuccess': function(resp) {
114
110
 
115
- var iframe = document.getElementById("iframe");
111
+ var iframe = document.getElementById("iframe");
116
112
 
117
- if(iframe){
113
+ if (iframe) {
118
114
 
119
- iframe.contentWindow.location.reload();
115
+ iframe.contentWindow.location.reload();
120
116
 
121
- }
117
+ }
122
118
 
123
- },
119
+ },
124
120
 
125
- 'onError': function() {
121
+ 'onError': function() {
126
122
 
127
- console.log("Error");
123
+ console.log("Error");
128
124
 
129
- },
125
+ },
130
126
 
131
- 'onTimeout': function() {
127
+ 'onTimeout': function() {
132
128
 
133
- console.log("Timeout");
129
+ console.log("Timeout");
134
130
 
135
- }
131
+ }
136
132
 
137
- });
133
+ });
138
134
 
139
- }
135
+ }
140
136
 
141
- function postData2Server(reqURL, data, timeout, callback) {
142
137
 
143
- if (document.baseURI.startsWith('file://')) {
144
138
 
145
- return;
139
+ function postData2Server(reqURL, data, timeout, callback) {
146
140
 
147
- }
141
+ if (document.baseURI.startsWith('file://')) {
148
142
 
149
- var req = new XMLHttpRequest();
143
+ return;
150
144
 
151
- req.timeout = timeout;
145
+ }
152
146
 
153
- req.ontimeout = callback.onTimeout;
147
+ var req = new XMLHttpRequest();
154
148
 
155
- req.onreadystatechange = function() {
149
+ req.timeout = timeout;
156
150
 
157
- if (req.readyState === 4) {
151
+ req.ontimeout = callback.onTimeout;
158
152
 
159
- if (req.status === 200) {
153
+ req.onreadystatechange = function() {
160
154
 
161
- if (req.responseText === 'OK') {
155
+ if (req.readyState === 4) {
162
156
 
163
- callback.onSuccess();
157
+ if (req.status === 200) {
164
158
 
165
- } else {
159
+ if (req.responseText === 'OK') {
166
160
 
167
- console.log('Error: req.responseText is not OK');
161
+ callback.onSuccess();
168
162
 
169
- callback.onError();
163
+ } else {
170
164
 
171
- }
165
+ console.log('Error: req.responseText is not OK');
172
166
 
173
- } else {
167
+ callback.onError();
174
168
 
175
- console.log('Error: req.status is not 200');
169
+ }
176
170
 
177
- callback.onError();
171
+ } else {
178
172
 
179
- }
173
+ console.log('Error: req.status is not 200');
180
174
 
181
- }
175
+ callback.onError();
182
176
 
183
- delete req;
177
+ }
184
178
 
185
- }
179
+ }
186
180
 
187
- req.open('POST', reqURL, true);
181
+ delete req;
188
182
 
189
- req.setRequestHeader('content-type', 'application/json');
183
+ }
190
184
 
191
- req.send(JSON.stringify(data));
185
+ req.open('POST', reqURL, true);
192
186
 
187
+ req.setRequestHeader('content-type', 'application/json');
188
+
189
+ req.send(JSON.stringify(data));
190
+
193
- }
191
+ }
192
+
193
+
194
194
 
195
195
  ```
196
196
 

3

reqURLを追加

2020/10/25 06:40

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -74,7 +74,7 @@
74
74
 
75
75
  var reqTimeout = 10000;
76
76
 
77
-
77
+ var reqURL = 'XXX/XXX'
78
78
 
79
79
  function onOkButton(){
80
80
 
@@ -102,7 +102,7 @@
102
102
 
103
103
  if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
104
104
 
105
- postData2Server(reqURL_threshold,
105
+ postData2Server(reqURL,
106
106
 
107
107
  {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
108
108
 

2

onOkButtonのソースコードを追記しました

2020/10/25 05:23

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -70,4 +70,130 @@
70
70
 
71
71
 
72
72
 
73
+ ```JavaScript
74
+
75
+ var reqTimeout = 10000;
76
+
77
+
78
+
79
+ function onOkButton(){
80
+
81
+ set();
82
+
83
+ }
84
+
85
+ function set(){
86
+
87
+ var setWL4,setWL3,setWL2,setWL1;
88
+
89
+ var input_WL_Lv4 = document.getElementById('input_WL_Lv4');
90
+
91
+ var input_WL_Lv3 = document.getElementById('input_WL_Lv3');
92
+
93
+ var input_WL_Lv2 = document.getElementById('input_WL_Lv2');
94
+
95
+ var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
96
+
97
+ if (input_WL_Lv4) setWL4 = Number.parseFloat(input_WL_Lv4.value);
98
+
99
+ if (input_WL_Lv3) setWL3 = Number.parseFloat(input_WL_Lv3.value);
100
+
101
+ if (input_WL_Lv2) setWL2 = Number.parseFloat(input_WL_Lv2.value);
102
+
103
+ if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
104
+
105
+ postData2Server(reqURL_threshold,
106
+
107
+ {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
108
+
109
+ reqTimeout,
110
+
111
+ {
112
+
113
+ 'onSuccess': function(resp) {
114
+
115
+ var iframe = document.getElementById("iframe");
116
+
117
+ if(iframe){
118
+
119
+ iframe.contentWindow.location.reload();
120
+
121
+ }
122
+
123
+ },
124
+
125
+ 'onError': function() {
126
+
127
+ console.log("Error");
128
+
129
+ },
130
+
131
+ 'onTimeout': function() {
132
+
133
+ console.log("Timeout");
134
+
135
+ }
136
+
137
+ });
138
+
139
+ }
140
+
141
+ function postData2Server(reqURL, data, timeout, callback) {
142
+
143
+ if (document.baseURI.startsWith('file://')) {
144
+
145
+ return;
146
+
147
+ }
148
+
149
+ var req = new XMLHttpRequest();
150
+
151
+ req.timeout = timeout;
152
+
153
+ req.ontimeout = callback.onTimeout;
154
+
155
+ req.onreadystatechange = function() {
156
+
157
+ if (req.readyState === 4) {
158
+
159
+ if (req.status === 200) {
160
+
161
+ if (req.responseText === 'OK') {
162
+
163
+ callback.onSuccess();
164
+
165
+ } else {
166
+
167
+ console.log('Error: req.responseText is not OK');
168
+
169
+ callback.onError();
170
+
171
+ }
172
+
173
+ } else {
174
+
175
+ console.log('Error: req.status is not 200');
176
+
177
+ callback.onError();
178
+
179
+ }
180
+
181
+ }
182
+
183
+ delete req;
184
+
185
+ }
186
+
187
+ req.open('POST', reqURL, true);
188
+
189
+ req.setRequestHeader('content-type', 'application/json');
190
+
191
+ req.send(JSON.stringify(data));
192
+
193
+ }
194
+
195
+ ```
196
+
197
+
198
+
73
199
  最後になりますが、ご助力よろしくお願いいたします。

1

文言修正

2020/10/25 05:16

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- ・その後、現象を再現させるために変更前に戻すと、現象が再現しなくなった（submit＝画面全更新が行われず、本来やりたかった動作をするようになった）。
25
+ ・その後、現象を再現させるために変更前に戻すと、現象が再現しなくなった（submit＝画面全更新が行われなくなった）。
26
26
 
27
27
 
28
28