teratail
回答率
85.48%
質問するログイン新規登録
トップHTML5に関する質問空白の<input>を消したいです。

編集履歴

質問編集履歴

5

コードの修正

2022/11/07 04:45

投稿

YUMINAGA
YUMINAGA

スコア45

test CHANGED
File without changes
test CHANGED
@@ -157,14 +157,6 @@
157
157
  </body>
158
158
  </html>
159
159
 
160
-
161
-
162
-
163
-
164
-
165
- <!-- ?id=<?php echo $data2[0][0]; ?> -->
166
- <!-- <?php echo $data2;?> 👈　如果將之全印出，會是一辭書型陣列 -->
167
-
168
160
  ```
169
161
 
170
162
 
HTML5PHPJavaScript

4

コード更新と修正済

2022/11/07 04:44

投稿

YUMINAGA
YUMINAGA

スコア45

test CHANGED
File without changes
test CHANGED
@@ -32,14 +32,14 @@
32
32
  <body>
33
33
  <?php include('./user_list.php') ?>
34
34
 
35
- <!-- 👇log in <form> -->
35
+ <!-- 👇登入區塊 -->
36
36
  <form action="./insert.php" method="post" enctype="multipart/form-data">
37
37
  ID:<input type="text" name="idd"><br>
38
38
  Name:<input type="text" name="user_name"><br>
39
39
  <input type="submit" value="記入">
40
40
  </form>
41
41
 
42
- <!-- 👇search <form> -->
42
+ <!-- 👇檢索區塊 -->
43
43
  <form action="" id="search" method="post" enctype="multipart/form-data">
44
44
  ID:<input type="text" name="ss" id="ss"><br>
45
45
  <input type="submit" name="submit" value="検索">
@@ -47,26 +47,35 @@
47
47
 
48
48
 
49
49
  <?php
50
- $ID = "";
51
- $member_name = "";
52
50
 
53
- // 👇issetを利用して<form>内の資料が送られたのかを確定する。
51
+ // 👇利用isset來確認form中的資料有無被送出
54
- if(isset($_POST['submit'])){
52
+ if(isset($_POST['ss'])){
55
53
  $search = $_POST['ss'];
56
54
  $sql2 = "SELECT * FROM user_list WHERE id = '$search' ";
57
55
  $sth2 = $db -> prepare($sql2);
58
56
  $sth2 -> execute();
59
57
  $data2 = $sth2->fetch();
60
58
 
59
+ $sql10 = "SELECT * FROM `user_list` WHERE ID in ('$search')";
60
+ $sth10 = $db -> prepare($sql10);
61
+ $sth10 -> execute();
61
- $ID = $data2["ID"];
62
+ $data10 = $sth10->fetchall();
62
- $member_name = $data2["member_name"];?>
63
63
 
64
+ if(empty($_POST['ss'])){
65
+ echo '<script> alert("記入してください") </script>';
64
- <?php
66
+ }else{
67
+ if($data10 == null){
68
+ echo '<script> alert("まだ登録されていないよ!!!") </script>';
69
+ }else{
70
+ $ID = $data2["ID"];
71
+ $member_name = $data2["member_name"];
72
+ }
73
+ }
65
74
  }
66
75
  ?>
67
76
 
68
- <section class="search_outcome"> <!-- 👈全ての検索結果を含む<section> -->
77
+ <section class="search_outcome"> <!-- 👈包含全部結果的<section> -->
69
- <div class="title"> <!-- 👈一つの検索結果を含む<div>-->
78
+ <div class="title"> <!-- 👈包含一項結果的<div>-->
70
79
  <div class="col_ID">
71
80
  <input type="text" value="ID" readonly>
72
81
  </div>
@@ -74,29 +83,20 @@
74
83
  <input type="text" value="NAME" readonly>
75
84
  </div>
76
85
  </div>
77
- <div class="list_for_all" id="list_for_all">
86
+ <div class="list_for_all" id="list_for_all"></div>
78
- <div class="list_for_one">
79
- <div class="col_ID">
80
- <input type="text" value="AAAA" readonly>
81
- </div>
82
- <div class="col_name">
87
+ <!-- 👆一開始時先做個空區塊，待日後由JS帶入資料 -->
83
- <input type="text" value="BBBB" readonly>
88
+
84
- </div>
85
- <div class="col_btn">
86
- <button class = revise>修正</button>
87
- <button class = delete>削除</button>
88
- </div>
89
- </div>
90
- </div>
91
89
  </section>
92
90
 
93
91
 
94
92
 
95
93
  <script>
96
94
 
95
+
97
- // 👇<form>内のIDを検索する。
96
+ // 👇找尋form的ID
98
97
  LIST_Storage = JSON.parse(localStorage.getItem('LIST_Storage')) || [];
99
98
  const search = document.querySelector('#search');
99
+ // 如果console.log(search)的話，會得到form中所有的程式碼。
100
100
 
101
101
 
102
102
  const outcome_list = {
@@ -106,16 +106,18 @@
106
106
  localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage));
107
107
 
108
108
  DisplayOutcomes()
109
+
109
110
  function DisplayOutcomes () {
110
- const outcomeList = document.querySelector('#list_for_all'); //👈全ての検索結果を含む<div>
111
+ const outcomeList = document.querySelector('#list_for_all'); //👈包含全部結果的<div>
111
112
  outcomeList.innerHTML = "";
112
113
  LIST_Storage.forEach(outcome_list => {
113
- const outcome_one_div = document.createElement('div'); //👈一つの検索結果を含む<div>
114
+ const outcome_one_div = document.createElement('div'); //👈包含一項結果的<div>
114
- const col_ID = document.createElement('div');　//👈一つ目のcolumnの結果を含む<div>
115
+ const col_ID = document.createElement('div');　//👈包含第一欄結果的<div>
115
- const col_NAME = document.createElement('div'); //👈二つ目のcolumnの結果を含む<div>
116
+ const col_NAME = document.createElement('div'); //👈包含第二欄結果的<div>
116
- const col_btn = document.createElement('div'); //👈二つのbtnを含む<div>
117
+ const col_btn = document.createElement('div'); //👈包含2個按鈕的<div>
117
- const revise = document.createElement('button'); //👈"修正"のbtn
118
+ const revise = document.createElement('button'); //👈"修改"的按鈕
118
- const delete_btn = document.createElement('button'); //👈"刪除"のbtn
119
+ const delete_btn = document.createElement('button'); //👈"刪除"的按鈕
120
+ //console.log(delete_btn);
119
121
 
120
122
  outcome_one_div.classList.add('list_for_one');
121
123
  col_ID.classList.add('col_ID');
@@ -148,8 +150,20 @@
148
150
  }
149
151
  </script>
150
152
 
153
+
154
+
155
+
156
+
151
157
  </body>
152
158
  </html>
159
+
160
+
161
+
162
+
163
+
164
+
165
+ <!-- ?id=<?php echo $data2[0][0]; ?> -->
166
+ <!-- <?php echo $data2;?> 👈　如果將之全印出，會是一辭書型陣列 -->
153
167
 
154
168
  ```
155
169
 
HTML5PHPJavaScript

3

commentを日本語に変換した

2022/11/06 05:31

投稿

YUMINAGA
YUMINAGA

スコア45

test CHANGED
File without changes
test CHANGED
@@ -32,14 +32,14 @@
32
32
  <body>
33
33
  <?php include('./user_list.php') ?>
34
34
 
35
- <!-- 👇登入區塊 -->
35
+ <!-- 👇log in <form> -->
36
36
  <form action="./insert.php" method="post" enctype="multipart/form-data">
37
37
  ID:<input type="text" name="idd"><br>
38
38
  Name:<input type="text" name="user_name"><br>
39
39
  <input type="submit" value="記入">
40
40
  </form>
41
41
 
42
- <!-- 👇檢索區塊 -->
42
+ <!-- 👇search <form> -->
43
43
  <form action="" id="search" method="post" enctype="multipart/form-data">
44
44
  ID:<input type="text" name="ss" id="ss"><br>
45
45
  <input type="submit" name="submit" value="検索">
@@ -50,7 +50,7 @@
50
50
  $ID = "";
51
51
  $member_name = "";
52
52
 
53
- // 👇利用isset來確認form中的資料有無被送出
53
+ // 👇issetを利用して<form>内の資料が送られたのかを確定する。
54
54
  if(isset($_POST['submit'])){
55
55
  $search = $_POST['ss'];
56
56
  $sql2 = "SELECT * FROM user_list WHERE id = '$search' ";
@@ -65,8 +65,8 @@
65
65
  }
66
66
  ?>
67
67
 
68
- <section class="search_outcome"> <!-- 👈包含全部結果的<section> -->
68
+ <section class="search_outcome"> <!-- 👈全ての検索結果を含む<section> -->
69
- <div class="title"> <!-- 👈包含一項結果的<div>-->
69
+ <div class="title"> <!-- 👈一つの検索結果を含む<div>-->
70
70
  <div class="col_ID">
71
71
  <input type="text" value="ID" readonly>
72
72
  </div>
@@ -74,8 +74,8 @@
74
74
  <input type="text" value="NAME" readonly>
75
75
  </div>
76
76
  </div>
77
- <div class="list_for_all" id="list_for_all"> <!-- 👈包含全部結果的<div> -->
77
+ <div class="list_for_all" id="list_for_all">
78
- <div class="list_for_one"> <!-- 👈包含一項結果的<div>-->
78
+ <div class="list_for_one">
79
79
  <div class="col_ID">
80
80
  <input type="text" value="AAAA" readonly>
81
81
  </div>
@@ -94,10 +94,9 @@
94
94
 
95
95
  <script>
96
96
 
97
- // 👇找尋form的ID
97
+ // 👇<form>内のIDを検索する。
98
98
  LIST_Storage = JSON.parse(localStorage.getItem('LIST_Storage')) || [];
99
99
  const search = document.querySelector('#search');
100
- // 如果console.log(search)的話，會得到form中所有的程式碼。
101
100
 
102
101
 
103
102
  const outcome_list = {
@@ -108,15 +107,15 @@
108
107
 
109
108
  DisplayOutcomes()
110
109
  function DisplayOutcomes () {
111
- const outcomeList = document.querySelector('#list_for_all'); //👈包含全部結果的<div>
110
+ const outcomeList = document.querySelector('#list_for_all'); //👈全ての検索結果を含む<div>
112
111
  outcomeList.innerHTML = "";
113
112
  LIST_Storage.forEach(outcome_list => {
114
- const outcome_one_div = document.createElement('div'); //👈包含一項結果的<div>
113
+ const outcome_one_div = document.createElement('div'); //👈一つの検索結果を含む<div>
115
- const col_ID = document.createElement('div');　//👈包含第一欄結果的<div>
114
+ const col_ID = document.createElement('div');　//👈一つ目のcolumnの結果を含む<div>
116
- const col_NAME = document.createElement('div'); //👈包含第二欄結果的<div>
115
+ const col_NAME = document.createElement('div'); //👈二つ目のcolumnの結果を含む<div>
117
- const col_btn = document.createElement('div'); //👈包含2個按鈕的<div>
116
+ const col_btn = document.createElement('div'); //👈二つのbtnを含む<div>
118
- const revise = document.createElement('button'); //👈"修改"的按鈕
117
+ const revise = document.createElement('button'); //👈"修正"のbtn
119
- const delete_btn = document.createElement('button'); //👈"刪除"的按鈕
118
+ const delete_btn = document.createElement('button'); //👈"刪除"のbtn
120
119
 
121
120
  outcome_one_div.classList.add('list_for_one');
122
121
  col_ID.classList.add('col_ID');
HTML5PHPJavaScript

2

内容の追記

2022/11/06 05:25

投稿

YUMINAGA
YUMINAGA

スコア45

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
  　
7
7
  ### 発生している問題
8
8
 
9
- ・動画の00:13～00:18の問題を解決したいです。(下図のように)
9
+ ・動画の00:13～00:18の問題を解決したいです。(下図は動画のscreen shotです)
10
10
  　https://youtu.be/e734Q7TB9qo
11
11
  　![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-06/f378fb5a-82bc-44f4-b5e9-2dad84482ddb.png)
12
12
  ・もしかして、問題になるコードは下記ではないかと思います。
HTML5PHPJavaScript

1

内容の修正と追加

2022/11/06 05:21

投稿

YUMINAGA
YUMINAGA

スコア45

test CHANGED
File without changes
test CHANGED
@@ -1,15 +1,14 @@
1
1
  ### 前提
2
- ＊本人は台湾人(中国語)、変な日本語が読みにくいなら、必ず教えて頂きたくお願い致します。
3
2
  ・制作中のアプリの大体の流れは下記通り：
4
3
  (1) 主機能は二つあり、「登録機能」と「検索機能」です。
5
4
  (2)「登録機能」：入力されたデータをPHP経由、データベースに登録します。
6
5
  (3)「検索機能」：入力されたIDを利用し、データベース中、同じIDの1 rowのデータを取得します。➡ localstorageに保存します。➡HTMLに反映します。
6
+ 　
7
+ ### 発生している問題
7
8
 
8
- ・下記LINKの動画は現在作成中のアプリの"テストバージョン"です。
9
+ ・動画の00:13～00:18の問題を解決したいです。(下図のように)
9
- 　 https://youtu.be/e734Q7TB9qo
10
+ 　https://youtu.be/e734Q7TB9qo
10
- ### 実現したいこと・発生している問題
11
-
12
- ・動画の00:13～00:18の問題を解決したいです。
11
+ 　![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-06/f378fb5a-82bc-44f4-b5e9-2dad84482ddb.png)
13
12
  ・もしかして、問題になるコードは下記ではないかと思います。
14
13
  $ID = "";
15
14
  $member_name = "";
HTML5PHPJavaScript