前提と発生している問題
- Ⓐにデーターを入力して、”検索”ボダンをクリックしたら、データベースから取得した資料を下に反映する(Ⓑのエリア)。
- 一旦、画面をrefresh、reloadしたら、前回データベースから取得した資料をもう一度勝手にⒷのエリアに出てきました。(検索結果が二重に表示されること)
実現したいこと
画面をrefresh、reloadしたら、Ⓑのエリアに勝手に前回データベースから取得した資料を反映させないようにしたいです。
試したこと
YOUTUBEなど他のチュートリアルを探したところ、下記2つの方法を試してました。
しかし、問題が解決できないです。
(1) 👇情報源:https://tech.amefure.com/php-redirect
header("Location:./search.php");
(2) 👇情報源:https://www.youtube.com/watch?v=wW52W2OCV64
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
該当のソースコード ➡ form.php
<!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'); session_start(); ?> <!-- 👇データー登録 --> <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="./search.php" id="search" method="post" enctype="multipart/form-data"> ID:<input type="text" name="ss" id="ss"><br> <input type="submit" name="submit" value="検索" id="search_btn"> </form> <section class="search_outcome"> <div class="title"> <div class="col_ID_title"> <input type="text" value="ID" readonly> </div> <div class="col_name_title"> <input type="text" value="NAME" readonly> </div> <div class="col_name_title"> <input type="button" id=delete_all_record value="一括記録消す"> </div> </div> <div class="list_for_all" id="list_for_all"></div> </section> <!-- 👇一括記録消すボダン --> <script> delete_all_record.addEventListener('click', () => { LIST_Storage.splice(0) localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); DisplayOutcomes() }) </script> <script> LIST_Storage = JSON.parse(localStorage.getItem('LIST_Storage')) || []; const search = document.querySelector('#search'); const outcome_list = { ID_list:"<?= $_SESSION['message_ID'] ?>", Member_list:"<?= $_SESSION['message_$member_name'] ?>"} //console.log(outcome_list); LIST_Storage.push(outcome_list); localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); //console.log(LIST_Storage); DisplayOutcomes() function DisplayOutcomes () { const outcomeList = document.querySelector('#list_for_all'); outcomeList.innerHTML = ""; LIST_Storage.forEach(outcome_list => { const outcome_one_div = document.createElement('div'); const col_ID = document.createElement('div'); const col_NAME = document.createElement('div'); const col_btn = document.createElement('div'); const revise = document.createElement('button'); const delete_btn = document.createElement('button'); 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>
該当のソースコード ➡ search.php
<?php //$ID = null; //$member_name = null; include('./user_list.php'); session_start(); // 👇issetを利用して、form内のデーターを送ったかを確認する if(isset($_POST['ss'])){ if(empty($_POST['ss'])){ echo '<script> if(confirm("記入してください。")) { window.location.href = "./form.php" }else{window.location.href = "./form.php"} </script>'; }else{ $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($data10 == null){ echo '<script> if(confirm("まだ登録されていないよ!!!")) { window.location.href = "./form.php" }else{window.location.href = "./form.php"} </script>'; }else{ $_SESSION['message_ID'] = $data2["ID"]; $_SESSION['message_$member_name'] = $data2["member_name"]; // 👆$_SESSIONを利用して、2つのPHPの間に変数を受け渡し。 header("Location:./form.php"); exit(); } } } ?>
あなたの回答
tips
プレビュー