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

編集履歴

質問編集履歴

4

コード修正

2020/10/25 06:40

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -27,6 +27,7 @@
27
27
  ```
28
28
 
29
29
  ### 今のコード
30
+ [jsfiddle](https://jsfiddle.net/0yzerw29/)
30
31
  ```HTML5
31
32
  <form action="#" onSubmit="onOkButton();return false;">
32
33
  <input value="" type="number" step="0.01" min="-99.99" max="99.99" required>
@@ -35,66 +36,65 @@
35
36
  ```
36
37
 
37
38
  ```JavaScript
38
- var reqTimeout = 10000;
39
- var reqURL = 'XXX/XXX'
40
- function onOkButton(){
41
- set();
42
- }
43
- function set(){
44
- var setWL4,setWL3,setWL2,setWL1;
45
- var input_WL_Lv4 = document.getElementById('input_WL_Lv4');
46
- var input_WL_Lv3 = document.getElementById('input_WL_Lv3');
47
- var input_WL_Lv2 = document.getElementById('input_WL_Lv2');
48
- var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
49
- if (input_WL_Lv4) setWL4 = Number.parseFloat(input_WL_Lv4.value);
50
- if (input_WL_Lv3) setWL3 = Number.parseFloat(input_WL_Lv3.value);
51
- if (input_WL_Lv2) setWL2 = Number.parseFloat(input_WL_Lv2.value);
52
- if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
53
- postData2Server(reqURL,
54
- {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
55
- reqTimeout,
56
- {
57
- 'onSuccess': function(resp) {
58
- var iframe = document.getElementById("iframe");
59
- if(iframe){
60
- iframe.contentWindow.location.reload();
61
- }
62
- },
63
- 'onError': function() {
64
- console.log("Error");
65
- },
66
- 'onTimeout': function() {
67
- console.log("Timeout");
68
- }
69
- });
70
- }
71
- function postData2Server(reqURL, data, timeout, callback) {
72
- if (document.baseURI.startsWith('file://')) {
73
- return;
74
- }
75
- var req = new XMLHttpRequest();
76
- req.timeout = timeout;
77
- req.ontimeout = callback.onTimeout;
78
- req.onreadystatechange = function() {
79
- if (req.readyState === 4) {
80
- if (req.status === 200) {
81
- if (req.responseText === 'OK') {
82
- callback.onSuccess();
83
- } else {
84
- console.log('Error: req.responseText is not OK');
85
- callback.onError();
86
- }
87
- } else {
88
- console.log('Error: req.status is not 200');
89
- callback.onError();
90
- }
91
- }
92
- delete req;
93
- }
94
- req.open('POST', reqURL, true);
95
- req.setRequestHeader('content-type', 'application/json');
96
- req.send(JSON.stringify(data));
97
- }
39
+ var reqTimeout = 10000;
40
+ var reqURL = 'XXX/XXX'
41
+
42
+ function onOkButton() {
43
+ set();
44
+ }
45
+
46
+ function set() {
47
+ var setWL1;
48
+ var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
49
+
50
+ if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
51
+ postData2Server(reqURL, {
52
+ "WL_Lv1": setWL1
53
+ },
54
+ reqTimeout, {
55
+ 'onSuccess': function(resp) {
56
+ var iframe = document.getElementById("iframe");
57
+ if (iframe) {
58
+ iframe.contentWindow.location.reload();
59
+ }
60
+ },
61
+ 'onError': function() {
62
+ console.log("Error");
63
+ },
64
+ 'onTimeout': function() {
65
+ console.log("Timeout");
66
+ }
67
+ });
68
+ }
69
+
70
+ function postData2Server(reqURL, data, timeout, callback) {
71
+ if (document.baseURI.startsWith('file://')) {
72
+ return;
73
+ }
74
+ var req = new XMLHttpRequest();
75
+ req.timeout = timeout;
76
+ req.ontimeout = callback.onTimeout;
77
+ req.onreadystatechange = function() {
78
+ if (req.readyState === 4) {
79
+ if (req.status === 200) {
80
+ if (req.responseText === 'OK') {
81
+ callback.onSuccess();
82
+ } else {
83
+ console.log('Error: req.responseText is not OK');
84
+ callback.onError();
85
+ }
86
+ } else {
87
+ console.log('Error: req.status is not 200');
88
+ callback.onError();
89
+ }
90
+ }
91
+ delete req;
92
+ }
93
+ req.open('POST', reqURL, true);
94
+ req.setRequestHeader('content-type', 'application/json');
95
+ req.send(JSON.stringify(data));
96
+ }
97
+
98
98
  ```
99
99
 
100
100
  最後になりますが、ご助力よろしくお願いいたします。

3

reqURLを追加

2020/10/25 06:40

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```JavaScript
38
38
  var reqTimeout = 10000;
39
-
39
+ var reqURL = 'XXX/XXX'
40
40
  function onOkButton(){
41
41
  set();
42
42
  }
@@ -50,7 +50,7 @@
50
50
  if (input_WL_Lv3) setWL3 = Number.parseFloat(input_WL_Lv3.value);
51
51
  if (input_WL_Lv2) setWL2 = Number.parseFloat(input_WL_Lv2.value);
52
52
  if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
53
- postData2Server(reqURL_threshold,
53
+ postData2Server(reqURL,
54
54
  {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
55
55
  reqTimeout,
56
56
  {

2

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

2020/10/25 05:23

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -34,4 +34,67 @@
34
34
  </form>
35
35
  ```
36
36
 
37
+ ```JavaScript
38
+ var reqTimeout = 10000;
39
+
40
+ function onOkButton(){
41
+ set();
42
+ }
43
+ function set(){
44
+ var setWL4,setWL3,setWL2,setWL1;
45
+ var input_WL_Lv4 = document.getElementById('input_WL_Lv4');
46
+ var input_WL_Lv3 = document.getElementById('input_WL_Lv3');
47
+ var input_WL_Lv2 = document.getElementById('input_WL_Lv2');
48
+ var input_WL_Lv1 = document.getElementById('input_WL_Lv1');
49
+ if (input_WL_Lv4) setWL4 = Number.parseFloat(input_WL_Lv4.value);
50
+ if (input_WL_Lv3) setWL3 = Number.parseFloat(input_WL_Lv3.value);
51
+ if (input_WL_Lv2) setWL2 = Number.parseFloat(input_WL_Lv2.value);
52
+ if (input_WL_Lv1) setWL1 = Number.parseFloat(input_WL_Lv1.value);
53
+ postData2Server(reqURL_threshold,
54
+ {"WL_Lv1":setWL1, "WL_Lv2":setWL2, "WL_Lv3":setWL3, "WL_Lv4":setWL4},
55
+ reqTimeout,
56
+ {
57
+ 'onSuccess': function(resp) {
58
+ var iframe = document.getElementById("iframe");
59
+ if(iframe){
60
+ iframe.contentWindow.location.reload();
61
+ }
62
+ },
63
+ 'onError': function() {
64
+ console.log("Error");
65
+ },
66
+ 'onTimeout': function() {
67
+ console.log("Timeout");
68
+ }
69
+ });
70
+ }
71
+ function postData2Server(reqURL, data, timeout, callback) {
72
+ if (document.baseURI.startsWith('file://')) {
73
+ return;
74
+ }
75
+ var req = new XMLHttpRequest();
76
+ req.timeout = timeout;
77
+ req.ontimeout = callback.onTimeout;
78
+ req.onreadystatechange = function() {
79
+ if (req.readyState === 4) {
80
+ if (req.status === 200) {
81
+ if (req.responseText === 'OK') {
82
+ callback.onSuccess();
83
+ } else {
84
+ console.log('Error: req.responseText is not OK');
85
+ callback.onError();
86
+ }
87
+ } else {
88
+ console.log('Error: req.status is not 200');
89
+ callback.onError();
90
+ }
91
+ }
92
+ delete req;
93
+ }
94
+ req.open('POST', reqURL, true);
95
+ req.setRequestHeader('content-type', 'application/json');
96
+ req.send(JSON.stringify(data));
97
+ }
98
+ ```
99
+
37
100
  最後になりますが、ご助力よろしくお願いいたします。

1

文言修正

2020/10/25 05:16

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ・対策として、Dのformタグに action="#"を入れると起きなくなった。
12
12
 
13
- ・その後、現象を再現させるために変更前に戻すと、現象が再現しなくなった（submit＝画面全更新が行われず、本来やりたかった動作をするようになった）。
13
+ ・その後、現象を再現させるために変更前に戻すと、現象が再現しなくなった（submit＝画面全更新が行われなくなった）。
14
14
 
15
15
 
16
16