質問編集履歴
1
コードの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,6 +16,25 @@
|
|
|
16
16
|
「見積り」ボタンを押していない → サーバーに送信する前に「(クリック)必須です」というエラーを表示させる。
|
|
17
17
|
という具合です。
|
|
18
18
|
|
|
19
|
+
**============＜修正点＞=================**
|
|
20
|
+
１. フラグを用意する
|
|
21
|
+
phpの47行目
|
|
22
|
+
`<input class="push" type="hidden" name="swich" value=""></input>`
|
|
23
|
+
のname=swichのvalueをフラグにすることにした。
|
|
24
|
+
・valueが空白なら → サーバー送信する前にエラー文字を表示
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
２. [見積り]のボタンを押すと、value="on"の追加
|
|
28
|
+
見積りボタンを押すとjavascriptの36行目からの操作で
|
|
29
|
+
`<input class="push" type="hidden" name="swich" value=""></input>`
|
|
30
|
+
が追加される。
|
|
31
|
+
|
|
32
|
+
３. 内容確認ボタンを押すが追加したフラグが反映されない。
|
|
33
|
+
内容確認（フォーム送信submit）ボタンを押してもname="swich"のvalueが更新されず空白のままです。
|
|
34
|
+
|
|
35
|
+
**==================================**
|
|
36
|
+
**↑↑ 3. の内容確認ボタンを押したときにname="swich"のvalueが変わってほしいです。**
|
|
37
|
+
|
|
19
38
|
お詳しい方にアドバイスを頂きたく投稿させていただきました。
|
|
20
39
|
|
|
21
40
|
よろしくお願いいたします。
|
|
@@ -24,7 +43,8 @@
|
|
|
24
43
|
|
|
25
44
|
```php
|
|
26
45
|
<?php
|
|
27
|
-
|
|
46
|
+
var_dump($_POST);
|
|
47
|
+
|
|
28
48
|
// 変数の初期化
|
|
29
49
|
$page_flag = 0;
|
|
30
50
|
|
|
@@ -34,7 +54,7 @@
|
|
|
34
54
|
$page_flag = 2;
|
|
35
55
|
}
|
|
36
56
|
|
|
37
|
-
|
|
57
|
+
echo $page_flag;
|
|
38
58
|
?>
|
|
39
59
|
|
|
40
60
|
<?php if( $page_flag === 1 ): ?>
|
|
@@ -45,12 +65,15 @@
|
|
|
45
65
|
<meta charset=shift_jis">
|
|
46
66
|
<title>フォームテスト</title>
|
|
47
67
|
</head>
|
|
68
|
+
|
|
48
69
|
<body>
|
|
49
70
|
<p>内容確認</p>
|
|
50
|
-
<p>10,000
|
|
71
|
+
<p>\10,000</p>
|
|
51
72
|
<p>これでいいですか？？</p>
|
|
52
73
|
</body>
|
|
74
|
+
|
|
53
75
|
<?php else: ?>
|
|
76
|
+
|
|
54
77
|
|
|
55
78
|
<!DOCTYOE html>
|
|
56
79
|
<html lang="ja">
|
|
@@ -58,19 +81,16 @@
|
|
|
58
81
|
<meta charset=shift_jis">
|
|
59
82
|
<title>フォームテスト</title>
|
|
60
83
|
<script type="text/javascript" src="modules/js/jquery.min.js"></script>
|
|
61
|
-
<script type="text/javascript" src="jsfile/test.js"></script>
|
|
84
|
+
<script type="text/javascript" src="jsfile/test2.js"></script>
|
|
62
|
-
<link rel="stylesheet" href="css
|
|
85
|
+
<link rel="stylesheet" href="css/test.css">
|
|
63
86
|
|
|
64
87
|
</head>
|
|
65
88
|
|
|
66
89
|
<body>
|
|
67
|
-
<form name="myForm" class="
|
|
90
|
+
<form name="myForm" class="btn_push" method="post" action="" novalidate>
|
|
68
|
-
<div>
|
|
69
|
-
<label for="name">名前 </label>
|
|
70
|
-
|
|
91
|
+
<input class="push" type="hidden" name="swich" value=""></input>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
92
|
<input type="button" value="見積り">
|
|
93
|
+
<div id="swich"></div>
|
|
74
94
|
<div id="output_message"></div>
|
|
75
95
|
<button name="registration" value="内容確認">内容確認</button>
|
|
76
96
|
<button onClick="JavaScript:history.back()">もどる</button>
|
|
@@ -82,10 +102,11 @@
|
|
|
82
102
|
|
|
83
103
|
```javascript
|
|
84
104
|
document.addEventListener('DOMContentLoaded', () => {
|
|
85
|
-
const
|
|
105
|
+
const btn_push = document.querySelector('.btn_push');
|
|
86
|
-
if(
|
|
106
|
+
if(btn_push) {
|
|
87
107
|
const errorClassName = 'error';
|
|
88
|
-
const
|
|
108
|
+
const pushElems = document.querySelectorAll('.push');
|
|
109
|
+
|
|
89
110
|
const createError = (elem, errorMessage) => {
|
|
90
111
|
const errorSpan = document.createElement('span');
|
|
91
112
|
errorSpan.classList.add(errorClassName);
|
|
@@ -93,29 +114,34 @@
|
|
|
93
114
|
errorSpan.textContent = errorMessage;
|
|
94
115
|
elem.parentNode.appendChild(errorSpan);
|
|
95
116
|
}
|
|
117
|
+
console.log(pushElems);
|
|
96
118
|
|
|
97
|
-
|
|
119
|
+
btn_push.addEventListener('submit', (e) => {
|
|
98
|
-
const errorElems =
|
|
120
|
+
const errorElems = btn_push.querySelectorAll('.' + errorClassName);
|
|
121
|
+
console.log(errorElems);
|
|
122
|
+
console.log(pushElems);
|
|
123
|
+
|
|
99
124
|
errorElems.forEach( (elem) => {
|
|
100
125
|
elem.remove();
|
|
101
126
|
});
|
|
102
|
-
|
|
103
|
-
|
|
127
|
+
pushElems.forEach( (elem) => {
|
|
128
|
+
console.log(elem);
|
|
104
129
|
const elemValue = elem.value.trim();
|
|
105
130
|
if(elemValue.length === 0) {
|
|
106
131
|
createError(elem, '必須です');
|
|
107
132
|
e.preventDefault();
|
|
108
133
|
}
|
|
109
134
|
});
|
|
110
|
-
document.myForm.action = "";
|
|
111
135
|
});
|
|
112
136
|
}
|
|
113
137
|
});
|
|
114
138
|
|
|
115
139
|
$(document).ready(function () {
|
|
116
140
|
$("input:button").click(function(){
|
|
141
|
+
swich = "<input class=\"push\" type=\"text\" name=\"swich\" value=\"on\"></input>";
|
|
117
|
-
input_message = "見積りしました。<br> 10,000
|
|
142
|
+
input_message = "見積りしました。<br> \\10,000<br>になります";
|
|
118
143
|
document.getElementById("output_message").innerHTML = input_message;
|
|
144
|
+
document.getElementById("swich").innerHTML = swich;
|
|
119
145
|
});
|
|
120
146
|
});
|
|
121
147
|
```
|