質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

空白の<input>を消したいです。

EOU818
YUMINAGA

総合スコア45

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

1グッド

0クリップ

256閲覧

投稿2022/11/05 12:09

編集2022/11/07 04:45

前提

・制作中のアプリの大体の流れは下記通り:
(1) 主機能は二つあり、「登録機能」と「検索機能」です。
(2)「登録機能」:入力されたデータをPHP経由、データベースに登録します。
(3)「検索機能」:入力されたIDを利用し、データベース中、同じIDの1 rowのデータを取得します。➡ localstorageに保存します。➡HTMLに反映します。

発生している問題

・動画の00:13~00:18の問題を解決したいです。(下図は動画のscreen shotです)
https://youtu.be/e734Q7TB9qo
イメージ説明
・もしかして、問題になるコードは下記ではないかと思います。
$ID = "";
$member_name = "";
上記のコードをセットしたので、空白が出てきたではないでしょうか?
しかし、それを削除してたら、おかしくなります。

該当のソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <?php include('./user_list.php') ?> <!-- 👇登入區塊 --> <form action="./insert.php" method="post" enctype="multipart/form-data"> ID:<input type="text" name="idd"><br> Name:<input type="text" name="user_name"><br> <input type="submit" value="記入"> </form> <!-- 👇檢索區塊 --> <form action="" id="search" method="post" enctype="multipart/form-data"> ID:<input type="text" name="ss" id="ss"><br> <input type="submit" name="submit" value="検索"> </form> <?php // 👇利用isset來確認form中的資料有無被送出 if(isset($_POST['ss'])){ $search = $_POST['ss']; $sql2 = "SELECT * FROM user_list WHERE id = '$search' "; $sth2 = $db -> prepare($sql2); $sth2 -> execute(); $data2 = $sth2->fetch(); $sql10 = "SELECT * FROM `user_list` WHERE ID in ('$search')"; $sth10 = $db -> prepare($sql10); $sth10 -> execute(); $data10 = $sth10->fetchall(); if(empty($_POST['ss'])){ echo '<script> alert("記入してください") </script>'; }else{ if($data10 == null){ echo '<script> alert("まだ登録されていないよ!!!") </script>'; }else{ $ID = $data2["ID"]; $member_name = $data2["member_name"]; } } } ?> <section class="search_outcome"> <!-- 👈包含全部結果的<section> --> <div class="title"> <!-- 👈包含一項結果的<div>--> <div class="col_ID"> <input type="text" value="ID" readonly> </div> <div class="col_name"> <input type="text" value="NAME" readonly> </div> </div> <div class="list_for_all" id="list_for_all"></div> <!-- 👆一開始時先做個空區塊,待日後由JS帶入資料 --> </section> <script> // 👇找尋form的ID LIST_Storage = JSON.parse(localStorage.getItem('LIST_Storage')) || []; const search = document.querySelector('#search'); // 如果console.log(search)的話,會得到form中所有的程式碼。 const outcome_list = { ID_list:'<?= $ID ?>', Member_list:'<?= $member_name ?>'} LIST_Storage.push(outcome_list); localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); DisplayOutcomes() function DisplayOutcomes () { const outcomeList = document.querySelector('#list_for_all'); //👈包含全部結果的<div> outcomeList.innerHTML = ""; LIST_Storage.forEach(outcome_list => { const outcome_one_div = document.createElement('div'); //👈包含一項結果的<div> const col_ID = document.createElement('div'); //👈包含第一欄結果的<div> const col_NAME = document.createElement('div'); //👈包含第二欄結果的<div> const col_btn = document.createElement('div'); //👈包含2個按鈕的<div> const revise = document.createElement('button'); //👈"修改"的按鈕 const delete_btn = document.createElement('button'); //👈"刪除"的按鈕 //console.log(delete_btn); outcome_one_div.classList.add('list_for_one'); col_ID.classList.add('col_ID'); col_NAME.classList.add('col_name'); col_btn.classList.add('col_btn'); revise.classList.add('revise'); delete_btn.classList.add('delete'); col_ID.innerHTML = `<input type="text" value="${outcome_list.ID_list}" readonly>`; col_NAME.innerHTML = `<input type="text" value="${outcome_list.Member_list}" readonly>`; revise.innerHTML = '修正'; delete_btn.innerHTML = '削除'; col_btn.appendChild(revise); col_btn.appendChild(delete_btn); outcome_one_div.appendChild(col_ID); outcome_one_div.appendChild(col_NAME); outcome_one_div.appendChild(col_btn); outcomeList.appendChild(outcome_one_div); console.log(outcomeList); delete_btn.addEventListener('click', (e) => { LIST_Storage = LIST_Storage.filter(LIST_Storage => LIST_Storage != outcome_list); localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); DisplayOutcomes() }) }) } </script> </body> </html>

補足情報(FW/ツールのバージョンなど)

👇localstorageのデータをHTML内に反映する方法について、下記画動画を参考しました。
https://www.youtube.com/watch?v=6eFwtaZf6zc

Cocode👏を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/11/06 03:08

もし英語のほうが得意なのであればstackoverflowのほうが有益と思います。
EOU818

2022/11/06 03:33

m.ts10806 様、 いつもコメントありがとうございます。 英語も問題ないですが、 やっぱり日本語の方が親しみを感じています。(笑) なぜstackoverflowを薦めますか?
m.ts10806

2022/11/06 03:44

stackoverflow本体は英語だからです。 母国語を無理に日本語にするよりも英語のほうが伝わりやすいこともあります。 台湾となると北京語主体のいわゆる「中国語」とも違いますしね。
m.ts10806

2022/11/06 03:46

まぁどうするかはお任せします。 PHPは割と回答率は高い方のはずが、この質問に誰も回答やコメントをしないということは、 日本語を母国語とする人とのやりとりより難しくなる印象があるからかもしれませんし。
m.ts10806

2022/11/06 03:49 編集

ひとまず私としてのこの質問を見た「感想」になりますが、 ・何を解決したいのか分からない ・何が問題なのか分からない ・何が起きていて「問題になるコードは下記」と出しているのか分からない (動画をわざわざ見て回答というのは、かなり億劫なので、あくまで「参考」として提示するにとどめて、質問者からきちんと説明した方が良いです) というところでしょうか。 日本語の問題というより、単純に説明が不足しているように感じました。
EOU818

2022/11/06 05:23

ご指摘、誠にありがとうございます。 修正致します。

回答2

0

自己解決

やっぱり空白が出る理由は下記2列のコードです。
現在解決ました。
$ID = "";
$member_name = "";

投稿2022/11/13 09:50

EOU818

総合スコア45

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

localStorageからLIST_Storageを取り出して、pushしてsetしているのであれば
リロード時に空データが追加されるのが仕様では?
それをやめたいならフローを見直してください

投稿2022/11/07 03:55

yambejp

総合スコア108937

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yambejp

2022/11/07 05:06

> リロードするとき、フォーム送信で起きる 登録したあとに表示ページに移動する仕組みにすればよいでしょう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。