如何在用戶刪除之前爲用戶添加確認消息？

我一直在試圖創建一個頁面，用戶可以在其中添加，編輯和刪除數據。我有非常基礎的知識，需要一些幫助來創建一條確認消息，詢問用戶是否確定他們想要繼續。（以及關於如何格式化存儲數據的表格的任何提示將非常有幫助！）如何在用戶刪除之前爲用戶添加確認消息？

//index.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"> 
    <title>CRUD Ajax PHP</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body onload="viewData()"> 
<p><br/></p> 
    <div class="container"> 
    <p></p> 
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button> 
<!-- Modal --> 
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 

<h4 class="modal-title" id="addLabel">Insert Data</h4> 
</div> 
    <form> 
    <div class="modal-body"> 
    <div class="form-group"> 
     <label for="nm">Full Name</label> 
<input type="text" class="form-control" id="nm" placeholder="Nama Lengkap"> 
</div> 
    <div class="form-group"> 
    <label for="em">Email</label> 
     <input type="email" class="form-control" id="em" placeholder="Surel"> 
</div> 
    <div class="form-group"> 
    <label for="hp">Phone</label> 
     <input type="number" class="form-control" id="hp" placeholder="Nomor Telp/HP"> 
</div> 
    <div class="form-group"> 
    <label for="al">Address</label> 
<textarea class="form-control" id="al" placeholder="Alamat"></textarea> 
</div> 

</div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button> 
</div> 
    </form> 
</div> 
</div> 
</div> 
</div id="result"> 
</div> 
<p></p> 
    <table class="table table-bordered table-striped"> 
<thead> 
    <tr> 
    <th width="40">ID</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Phone</th> 
     <th>Address</th> 
     <th width="150">Action</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
    </table> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

<script> 
    function saveData() { 
     var name = $('#nm').val(); 
     var email = $('#em').val(); 
     var phone = $('#hp').val(); 
     var address = $('#al').val(); 
     $.ajax({ 
     type: "POST", 
     url: "server.php?p=add", 
     data: "nm=" + name + "&em=" + email + "&hp=" + phone + "&al=" + address, 
     success: function(data) { 
      viewData(); 
     } 
     }); 
    } 
    function viewData() { 
     $.ajax({ 
     type: "GET", 
     url: "server.php", 
     success: function(data) { 
      $('tbody').html(data); 
     } 
     }); 
    } 
    function updateData(str) { 
     var id = str; 
     var name = $('#nm-' + str).val(); 
     var email = $('#em-' + str).val(); 
     var phone = $('#hp-' + str).val(); 
     var address = $('#al-' + str).val(); 
     $.ajax({ 
     type: "POST", 
     url: "server.php?p=edit", 
     data: "nm=" + name + "&em=" + email + "&hp=" + phone + "&al=" + address + "&id=" + id, 
     success: function(data) { 
      viewData(); 
     } 
     }); 
    } 
    function deleteData(str) { 
     var id = str; 
     $.ajax({ 
     type: "GET", 
     url: "server.php?p=del", 
     data: "id=" + id, 
     success: function(data) { 
      viewData(); 
     } 
     }); 
    } 
    </script> 
</body> 

</html>

// server.php

<?php $db=new PDO('mysql:host=localhost;dbname=test', 'root', 'root'); $page=isset($_GET[ 'p'])? $_GET[ 'p']: ''; 

if($page=='add'){ 
$name=$ _POST[ 'nm']; 
$email=$ _POST[ 'em']; 
$phone=$ _POST[ 'hp']; 
$address=$ _POST[ 'al']; 
$stmt=$db->prepare("insert into crud values('',?,?,?,?)"); 
$stmt->bindParam(1,$name); 
$stmt->bindParam(2,$email); 
$stmt->bindParam(3,$phone); $stmt->bindParam(4,$address); 

if($stmt->execute()){ 
    echo "Success add data"; 
} 
else{ 
    echo "Fail add data"; 
} 
    } 
else if ($page=='edit') 
{ 
$id= $_POST['id']; 
$name= $_POST['nm']; 
$email= $_POST['em']; 
$phone= $_POST['hp']; 
$address= $_POST['al']; 
$stmt=$db->prepare("update crud set name=?, email=?, phone=?, address=? where id=?"); 
$stmt->bindParam(1,$name); 
$stmt->bindParam(2,$email); 
$stmt->bindParam(3,$phone); 
$stmt->bindParam(4,$address); 
$stmt->bindParam(5,$id); 

if($stmt->execute()){ 
    echo "Success update data"; 
} 
else{ 
    echo "Fail update data"; 
} 
    } 
else if ($page=='del') 
{ 
    $id = $_GET['id']; 
    $stmt = $db->prepare("delete from crud where id=?"); 
    $stmt->bindParam(1,$id); 
    if($stmt->execute()){ 
    echo "Success delete data"; 
} 
else{ 
    echo "Fail delete data"; 
} 
    } 
else{ 
$stmt = $db->prepare("select * from crud order by id desc"); $stmt->execute(); while($row = $stmt->fetch()){ ?> 
<tr> 
    <td> 
    <?php echo $row['id'] ?> 
    </td> 
    <td> 
    <?php echo $row['name'] ?> 
    </td> 
    <td> 
    <?php echo $row['email'] ?> 
    </td> 
    <td> 
    <?php echo $row['phone'] ?> 
    </td> 
    <td> 
    <?php echo $row['address'] ?> 
    </td> 
    <td> 
<button class="btn btn-warning" data-toggle="modal" 
     data-target="#edit-<?php echo $row['id']?>">Edit</button> 
<!-- Modal --> 
    <div class="modal fade" id="edit-<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="editLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" 
     aria-label="Close"><span aria-hidden="true">&times;</span></button> 

<h4 class="modal-title" id="editLabel-<?php echo $row['id'] ?>">Edit Data</h4> 
    </div> 
<form> 
    <div class="modal-body"> 
<input type="hidden" class="form-control" id="<?php echo $row['id'] ?>" value="<?php echo $row['name'] ?>"> 

<div class="form-group"><label for="nm">Full Name</label> 
    <input type="text" class="form-control" id="nm-<?php echo $row['id'] ?>" value="<?php echo $row['name'] ?>"> 
</div> 

<div class="form-group"><label for="em">Email</label> 
    <input type="email" class="form-control" id="em-<?php echo $row['id'] ?>" value="<?php echo $row['email'] ?>"> 
</div> 

<div class="form-group"> 
    <label for="hp">Phone</label> 
    <input type="number" class="form-control" id="hp-<?php echo $row['id'] ?>" value="<?php echo $row['phone'] ?>"> 
</div> 

<div class="form-group"> 
    <label for="al">Address</label> 
<textarea class="form-control" id="al-<?php echo $row['id'] ?>" placeholder="Alamat"><?php echo $row[ 'address'] ?> 
</textarea> 
    </div> 
    </div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 
     data-dismiss="modal">Close</button> 
<button type="submit" onclick="updateData(<?php echo $row['id'] ?>)" class="btn btn-primary">Update</button> 
</div> 
    </form> 
    </div> 
    </div> 
    </div> 
<button onclick="deleteData(<?php echo $row['id'] ?>)" 
     class="btn btn-danger">Delete</button> 
    </td> 
</tr> 
<?php 
} 
} 
?>

來源

2017-02-15 Adam

有一個很酷的功能，在JavaScript稱爲confirm()，只需使用它像：

if(confirm("are you sure you want to delete ? ")) { 
//do stuff 
}

來源

2017-02-15 16:55:14 Nicolas

感謝您的答覆尼古拉斯的文件WOU我需要實現這個？ – Adam

@Adam什麼都不是純粹的javascript – Nicolas

哦好吧，你可以給我一些關於如何執行「做東西」部分的指針嗎？ – Adam

如何在用戶刪除之前爲用戶添加確認消息？

回答

相關問題