PHP 削除確認画面をJQueryで実装処理

削除ボタンを押した後、確認画面がなく削除されるのが嫌で
JQueryを使って確認ダイアログを表示しようと思って
OnClickで発動させようと考えています。

このJQueryを使わずに、削除ボタンを押すとデータが削除できるのは確認できています。

ネットで調べたりして、下記のコードに書いている内容で実装してみましたが
確認ダイアログが出ますが、それ以降のPHPの処理が途絶えて、ダイアログがただでるだけになってしまってます。

どのように対処したら良いでしょうか？
すいませんが、よろしくお願いいたします。

php
1if(isset($_POST['delete'])===TRUE){
2      if(isset($_POST['delete_id']) === TRUE){
3        $delete_id = $_POST['delete_id'];
4      }
5      foreach($delete_id as $row){
6        $id = $row;
7        try{
8          $sql = 'DELETE FROM genre WHERE genre_id = :genre_id';
9          $stmt = $pdo -> prepare($sql);
10          $stmt -> bindValue(':genre_id', $id, PDO::PARAM_INT);
11          $stmt -> execute();
12        }catch(PDOException $e){
13          echo $e -> getMessage();
14        }
15      }
16    }
17
18
19
20<html>
21
22
23<form method="POST">
24          <div id='categories'>
25            <tr>
26              <td><input type="checkbox" class="category" name="delete_id[]" value="<?php print h($row['genre_id']) ;?>"></td>
27              <td><input type="text" name="edit_id" value="<?php print h($row['genre_id']) ;?>" readonly="readonly"></td>
28              <td><input type="text" name="edit_name" value="<?php print h($row['genre_name']) ;?>"></td>
29              <td>
30                <input type="submit" id="change_confirm" name="change" value="変更" onClick="dispChange();return false;">
31                <input type="reset" value="キャンセル">
32                <input type="submit" id="delete_confirm" name="delete" value="チェックした行を削除" onClick="dispDelete();return false;">
33              </td>
34            </tr>
35          </div>
36        </form>
37
38
39</html>

js
1function dispDelete(){
2  if(!window.confirm('削除しますか？')){
3    window.alert('キャンセルされました'); // 警告ダイアログを表示
4    return false;
5  }
6}
7
8function dispChange(){
9  if(!window.confirm('変更しますか？')){
10    window.alert('キャンセルされました'); // 警告ダイアログを表示
11    return false;
12  }
13}

Y.H.

2019/09/03 08:04

質問のタグにjavascriptを追加ください。 JQuery関係ないので、質問タグから削除される方が良いかと思います。 JQueryでやるならyambejpさんの回答のほうが良い回答となります。

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

回答2件

ベストアンサー

inputタグのonClickに記載している return false;を削除してください。
これがあるので、onClickイベントがキャンセルされるのでsubmitされません。
returnで、falseを返すのではなく、dispChange(), dispDelete()の戻り値を返してください。
onClick="dispChange();return false;" ⇒ onClick="return dispChange();"
onClick="dispDelete();return false;" ⇒ onClick="return dispDelete();"

あと、javascriptで以下のようにキャンセル以外の場合は、trueを返してください。

function dispDelete(){
  if(!window.confirm('削除しますか？')){
    window.alert('キャンセルされました'); // 警告ダイアログを表示
    return false;
  }
  return true;
}

function dispChange(){
  if(!window.confirm('変更しますか？')){
    window.alert('キャンセルされました'); // 警告ダイアログを表示
    return false;
  }
  return true;
}

投稿2019/09/03 07:48

編集2019/09/03 07:55

Y.H.

総合スコア7914

hello_mate

2019/09/03 07:51

ご回答ありがとうございます。指摘していただいた内容で行うと、はい。を選択で削除されますがキャンセルを押しても削除されてしまいます。

hello_mate

2019/09/03 08:00

onClick="return dispDelete();" とすると、正常に動きました！ありがとうございます

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

送信時のバリデート処理ですかね？

javascript
1<?PHP
2$delete_id=filter_input(INPUT_POST,'delete_id',FILTER_VALIDATE_INT,FILTER_REQUIRE_ARRAY);
3var_dump($delete_id);
4?>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7$(function(){
8  $('#delete_confirm').on('click',function(e){
9    if($('.category:checked').length==0){
10      e.preventDefault();
11      window.alert('チェックしてください');
12    }else if(!window.confirm('削除しますか？')){
13      e.preventDefault();
14      window.alert('キャンセルされました');
15    }
16  });
17});
18</script>
19<form method="POST">
20<input type="checkbox" class="category" name="delete_id[]" value="1">1<br>
21<input type="checkbox" class="category" name="delete_id[]" value="2">2<br>
22<input type="checkbox" class="category" name="delete_id[]" value="3">3<br>
23<input type="submit" id="delete_confirm" name="delete" value="チェックした行を削除">
24</td>
25</tr>
26</div>
27</form>
28