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

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

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

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

Q&A

解決済

2回答

1129閲覧

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

MakotoIshizawa

総合スコア32

PHP

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

0グッド

0クリップ

投稿2019/09/27 05:20

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 { /*ファイルが無かった場合変数の定義を1とする*/ 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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2019/09/27 05:25

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MakotoIshizawa

2019/09/27 05:30

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

退会済みユーザー

2019/09/27 08:21

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

0

ベストアンサー

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

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の拡張機能が邪魔していました。 それらを調整して正しく動作しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問