掲示板で削除ボタンを押した時に「本当に削除しますか」と表示させたい。

confirmを使って書いてみました。
キャンセルを押した時にも削除されてしまいましたので、同じような質問を参考に書き換えてみましたが、やはりキャンセルを押しても削除されてしまいます。
JavaScriptは初めて触ったので、調べながらもまだ理解がものすごく浅い状態です。
どこがいけないのでしょうか?

php
1<?php
2/*もしポストで送信されたら以下の処理を行いGET送信でリダイレクトする（更新時の二重書き込み防止）*/
3if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ) { /*もしPOSTで送信されたら*/
4
5  /*フォームで送信された値を受け取り、テキストファイルに保存する。
6  その際1行ごとに「{番号}<>{名前}<>{コメント}<>{投稿された時間}」と言う形で保存する*/
7  //変数の定義
8  $filename = "keijiban.txt"; /*保存するファイル*/
9  $name = $_POST[ 'name' ]; /*投稿者の名前*/
10  $comment = $_POST[ 'comment' ]; /*投稿するコメント*/
11  $date = date( "Y-m-d H:i" ); /*投稿日時*/
12  $search = array( "\r\n", "\r", "\n", "<>" ); //置き換え時の検索文字
13  $replace = array( "<<改行>>", "<<改行>>", "<<改行>>", "&lt;&gt;" ); //置き換える文字
14  $deleteNO = $_POST[ 'deleteNO' ]; /*削除番号の変数定義*/
15  //投稿番号の定義
16  if ( is_file( $filename ) ) { /*ファイルの存在確認。*/
17    //最後の行にプラス1
18    $ret_array = file( $filename );
19    $lastline = $ret_array[ count( $ret_array ) - 1 ];
20    $num = explode( '<>', $lastline );
21    $lastnum = $num[ 0 ] + 1;
22  } else { /*ファイルが無かった場合変数の定義を１とする*/
23    $lastnum = 1;
24  }
25
26  //書き込み内容
27  $hozon = $lastnum . "<>" . str_replace( $search, $replace, $name ) . "<>" . str_replace( $search, $replace, $comment ) . "<>" . $date . "\n";
28
29  //投稿部分
30  if ( !empty( $_POST[ 'name' ] ) && !empty( $_POST[ 'comment' ] ) ) { /*もし名前とコメントが送信されたら*/
31    $fp = fopen( $filename, "a" ); /*追記モードでファイルを開く*/
32    if ( flock( $fp, LOCK_EX ) ) { /*ロックする*/
33      fwrite( $fp, $hozon ); /*指定したファイルに追記モードで書き込み*/
34    }
35    flock( $fp, LOCK_UN );
36    fclose( $fp );
37  }
38  //削除部分
39  if ( !empty( $_POST[ 'deleteNO' ] ) ) { //もし、削除番号がポスト送信されたら
40    $deleteNO = $_POST[ 'deleteNO' ]; //削除番号の変数定義
41    $ret_array = file( $filename ); //ファイルを配列として読み込む
42    $fp = fopen( $filename, "w" );
43    if ( flock( $fp, LOCK_EX ) ) {
44      foreach ( $ret_array as $value ) { //ループ
45        $bangou = explode( "<>", $value ); //<>で分割し投稿番号取り出す
46        if ( $deleteNO !== $bangou[ 0 ] ) { //もし読み込んだ番号と送信した番号が違ったら
47          fwrite( $fp, $value ); //ファイルに書き込む           
48        }
49      }
50    }
51    flock( $fp, LOCK_UN ); //ロック開放
52    fclose( $fp );
53  }
54
55  header( 'Location: keijiban.php' );
56  exit;
57}
58?>
59<!doctype html>
60<html lang="ja">
61<head>
62<meta charset="utf-8">
63<title>簡易掲示板</title>
64</head>
65
66<body>
67<form action="keijiban.php" method="post" >
68  <label for="name-field">お名前<span style="color: red;">【必須】</span><br>
69  </label>
70  <input type="text" name="name" id="name-field" required="required">
71  <label for="comment">コメント<span style="color: red;">【必須】</span></label>
72  <br>
73  <textarea name="comment" cols="30" rows="3" id="comment" required="required"></textarea>
74  <input type="submit" value="投稿">
75</form>
76<form action="keijiban.php" method="post" name="sakujo">
77  <label for="deleteNO" >削除対象番号</label>
78  <input type="text" name="deleteNO" id="deleteNO" >
79  <input name="btn" type="submit" value="削除">
80</form>
81<script>
82		document.sakujo.btn.addEventListener('click', function() {	
83		 if(!window.confirm('本当に削除しますか？')){
84          window.alert('キャンセルされました'); 
85          return false;
86        }
87		})
88		</script>
89<?php
90$filename = "keijiban.txt";
91$search = array( "<<改行>>", "&lt;&gt;" ); //置き換え時の検索文字
92$replace = array( "<br>", "<>" ); //置き換える文字
93
94if ( is_file( $filename ) ) { //ファイルの存在確認
95  $ret_array = file( $filename ); //配列として読み込む
96  if ( empty( $ret_array ) === false ) { //配列があれば
97    foreach ( $ret_array as $value ) { //ループ
98      $bunkatu = explode( "<>", $value ); //<>で分割する
99      foreach ( $bunkatu as $value2 ) { //ループ
100        echo str_replace( $search, $replace, $value2 ) . "<br>\n"; //投稿内容を表示(<<改行>>と&lt;&gt;を<br>と<>に置き換える)
101      }
102    }
103  } else { //配列がなければ
104    echo "まだ投稿はありません"; //「まだ投稿がありません」と表示させる
105  }
106} else { //ファイルが存在しなければ
107  echo "まだ投稿はありません"; //「まだ投稿がありません」と表示させる
108}
109
110?>
111</body>
112</html>

行動規範の内容に同意します

回答2件

submit 処理を横取りして確認画面を出し、「削除する」を選択した場合のみ submit させると良いと思います。

投稿2019/09/27 05:25

退会済みユーザー

総合スコア0

MakotoIshizawa

2019/09/27 05:30

すみません、初のJavaScriptでピンと来ません。 submit処理を横取りするとは具体的にはどのようなことでしょうか

MakotoIshizawa

2019/09/27 05:36

onclickのことでしょうか

退会済みユーザー

2019/09/27 08:21

私個人の実装時には onclick で JavaScript を叩くことはあまりしません。 (かなり個人的な見解でコメントしますが) POST 動作時には多くの場合、投稿前にバリデーションをかけるので、そもそも JavaScript 側で submit する仕組みを使用します。なので、Event 発火後に JavaScript で form 内容を拾い、バリデーションを実施し、その後に「確認」画面を見せ、承諾なら POST。といった流れをイメージします。もっとも、これが一般的です！と言えるほどの一般論ではないです。こういった動作は ajax を使用しつつ画面遷移なしに実装するのがトレンドになっているので、概念が理解できれば、次のステップに進んでしまったほうが実践的な気がします。

行動規範の内容に同意します

ベストアンサー

イベントをキャンセルしてください

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  document.querySelector('#delbtn').addEventListener('click',function(e){
4    if(!confirm('本当に削除しますか？')){
5      alert('キャンセルされました'); 
6      e.preventDefault();
7    }
8  });
9});
10</script>
11<form method="post">
12削除対象番号
13<input type="text" name="deleteNO" required>
14<input name="btn" type="submit" value="削除" id="delbtn">
15</form>

投稿2019/09/27 05:27

yambejp

総合スコア116661

MakotoIshizawa

2019/09/27 06:05 編集

試してみたのですが、何も表示されずにそのまま削除されてしまいました。

yambejp

2019/09/27 06:05

おそらくここ以外のところでjavascriptのエラーがでていて、 javascript自体が無効になっているのでしょう。他の箇所をよく精査してください

MakotoIshizawa

2019/09/27 06:07

はい、ありがとうございます。今日はもう時間がないので、また明日やってみたいと思います

MakotoIshizawa

2019/09/30 06:29

エラーが出ているだろうということで、調べてみました。エラーをどの様に調べるかもわからなかったので、そこから調べました。結論としてF12のconsoleを見ました。出ていたエラーをコピーして検索しました。結果は、Kasperskyと、Chromeの拡張機能が邪魔していました。それらを調整して正しく動作しました。

行動規範の内容に同意します

あなたの回答