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

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

ただいまの
回答率

87.49%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 917

score 32

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

<?php
/*もしポストで送信されたら以下の処理を行いGET送信でリダイレクトする(更新時の二重書き込み防止)*/
if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ) { /*もしPOSTで送信されたら*/

  /*フォームで送信された値を受け取り、テキストファイルに保存する。
  その際1行ごとに「{番号}<>{名前}<>{コメント}<>{投稿された時間}」と言う形で保存する*/
  //変数の定義
  $filename = "keijiban.txt"; /*保存するファイル*/
  $name = $_POST[ 'name' ]; /*投稿者の名前*/
  $comment = $_POST[ 'comment' ]; /*投稿するコメント*/
  $date = date( "Y-m-d H:i" ); /*投稿日時*/
  $search = array( "\r\n", "\r", "\n", "<>" ); //置き換え時の検索文字
  $replace = array( "<<改行>>", "<<改行>>", "<<改行>>", "&lt;&gt;" ); //置き換える文字
  $deleteNO = $_POST[ 'deleteNO' ]; /*削除番号の変数定義*/
  //投稿番号の定義
  if ( is_file( $filename ) ) { /*ファイルの存在確認。*/
    //最後の行にプラス1
    $ret_array = file( $filename );
    $lastline = $ret_array[ count( $ret_array ) - 1 ];
    $num = explode( '<>', $lastline );
    $lastnum = $num[ 0 ] + 1;
  } else { /*ファイルが無かった場合変数の定義を1とする*/
    $lastnum = 1;
  }

  //書き込み内容
  $hozon = $lastnum . "<>" . str_replace( $search, $replace, $name ) . "<>" . str_replace( $search, $replace, $comment ) . "<>" . $date . "\n";

  //投稿部分
  if ( !empty( $_POST[ 'name' ] ) && !empty( $_POST[ 'comment' ] ) ) { /*もし名前とコメントが送信されたら*/
    $fp = fopen( $filename, "a" ); /*追記モードでファイルを開く*/
    if ( flock( $fp, LOCK_EX ) ) { /*ロックする*/
      fwrite( $fp, $hozon ); /*指定したファイルに追記モードで書き込み*/
    }
    flock( $fp, LOCK_UN );
    fclose( $fp );
  }
  //削除部分
  if ( !empty( $_POST[ 'deleteNO' ] ) ) { //もし、削除番号がポスト送信されたら
    $deleteNO = $_POST[ 'deleteNO' ]; //削除番号の変数定義
    $ret_array = file( $filename ); //ファイルを配列として読み込む
    $fp = fopen( $filename, "w" );
    if ( flock( $fp, LOCK_EX ) ) {
      foreach ( $ret_array as $value ) { //ループ
        $bangou = explode( "<>", $value ); //<>で分割し投稿番号取り出す
        if ( $deleteNO !== $bangou[ 0 ] ) { //もし読み込んだ番号と送信した番号が違ったら
          fwrite( $fp, $value ); //ファイルに書き込む           
        }
      }
    }
    flock( $fp, LOCK_UN ); //ロック開放
    fclose( $fp );
  }

  header( 'Location: keijiban.php' );
  exit;
}
?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>簡易掲示板</title>
</head>

<body>
<form action="keijiban.php" method="post" >
  <label for="name-field">お名前<span style="color: red;">【必須】</span><br>
  </label>
  <input type="text" name="name" id="name-field" required="required">
  <label for="comment">コメント<span style="color: red;">【必須】</span></label>
  <br>
  <textarea name="comment" cols="30" rows="3" id="comment" required="required"></textarea>
  <input type="submit" value="投稿">
</form>
<form action="keijiban.php" method="post" name="sakujo">
  <label for="deleteNO" >削除対象番号</label>
  <input type="text" name="deleteNO" id="deleteNO" >
  <input name="btn" type="submit" value="削除">
</form>
<script>
        document.sakujo.btn.addEventListener('click', function() {    
         if(!window.confirm('本当に削除しますか?')){
          window.alert('キャンセルされました'); 
          return false;
        }
        })
        </script>
<?php
$filename = "keijiban.txt";
$search = array( "<<改行>>", "&lt;&gt;" ); //置き換え時の検索文字
$replace = array( "<br>", "<>" ); //置き換える文字

if ( is_file( $filename ) ) { //ファイルの存在確認
  $ret_array = file( $filename ); //配列として読み込む
  if ( empty( $ret_array ) === false ) { //配列があれば
    foreach ( $ret_array as $value ) { //ループ
      $bunkatu = explode( "<>", $value ); //<>で分割する
      foreach ( $bunkatu as $value2 ) { //ループ
        echo str_replace( $search, $replace, $value2 ) . "<br>\n"; //投稿内容を表示(<<改行>>と&lt;&gt;を<br>と<>に置き換える)
      }
    }
  } else { //配列がなければ
    echo "まだ投稿はありません"; //「まだ投稿がありません」と表示させる
  }
} else { //ファイルが存在しなければ
  echo "まだ投稿はありません"; //「まだ投稿がありません」と表示させる
}

?>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/27 14:30

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

    キャンセル

  • 2019/09/27 14:36

    onclickのことでしょうか

    キャンセル

  • 2019/09/27 17:21

    私個人の実装時には onclick で JavaScript を叩くことはあまりしません。

    (かなり個人的な見解でコメントしますが) POST 動作時には多くの場合、投稿前にバリデーションをかけるので、そもそも JavaScript 側で submit する仕組みを使用します。
    なので、Event 発火後に JavaScript で form 内容を拾い、バリデーションを実施し、その後に「確認」画面を見せ、承諾なら POST。といった流れをイメージします。

    もっとも、これが一般的です!と言えるほどの一般論ではないです。

    こういった動作は ajax を使用しつつ画面遷移なしに実装するのがトレンドになっているので、概念が理解できれば、次のステップに進んでしまったほうが実践的な気がします。

    キャンセル

checkベストアンサー

+1

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

<script>
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#delbtn').addEventListener('click',function(e){
    if(!confirm('本当に削除しますか?')){
      alert('キャンセルされました'); 
      e.preventDefault();
    }
  });
});
</script>
<form method="post">
削除対象番号
<input type="text" name="deleteNO" required>
<input name="btn" type="submit" value="削除" id="delbtn">
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/27 14:38 編集

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

    キャンセル

  • 2019/09/27 15:05

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

    キャンセル

  • 2019/09/27 15:07

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

    キャンセル

  • 2019/09/30 15:29

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

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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