javascript - 如何在用户删除之前添加确认消息？

标签 javascript php jquery html

我一直在尝试创建一个用户可以在其中添加、编辑和删除数据的页面。我有非常基础的知识，需要一些帮助来创建一条确认消息，询问用户是否确定要继续。(有关如何格式化存储数据的表的任何提示都会非常有帮助!)

//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 
} 
} 
?>

最佳答案

JavaScript 中有一个非常酷的函数，称为 confirm()，只需像这样使用它即可:

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

关于javascript - 如何在用户删除之前添加确认消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42255484/

上一篇：javascript - Redux 中应该在哪里进行异步操作的存储调度？

下一篇：javascript - 无法在浏览器书签中运行 javascript 循环？

相关文章：

javascript - fancybox/jQuery : Why can't I abort after toclick in a button with some relation with fancybox?

javascript - 图像鼠标悬停平移的方程式？

php - 如何摆脱 PHP 的 imap_fetchstructure() 的错误消息？

php - 将日期从 PDO 传递到 MySQL 存储过程

jquery - Liferay 中的 Accordion /可折叠导航

javascript - 如果内容没有溢出，请不要显示阅读更多按钮

javascript - 如何根据我在 HTML 表单上的用户输入更新我的 PHP 脚本

php - 如何将mysql改为mysqli？

javascript - 如何合并对象属性并让其合并并在一个对象下

javascript - 如何通过向 func 传递参数来更改默认值？

©2024 IT工具网  联系我们