Ajax_php1
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="style/style.css">
<!-- <link rel="stylesheet" href="style/style.css?v=<?php echo time(); ?>"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span id="a"></span>
<form id="F">
<label for="name">EnterName</label>
<input type="text" name="nm" id="nm">
<br/>
<label for="password">EnterPassword</label>
<input type="password" name="pwd" id="pwd">
<br/>
<button type="submit" id="bt">save</button>
</form>
<div id="main"></div>
<!-- <div id="m" >
<span class="close-btn">
×
</span>
</div> -->
<div id="m" style="display: none;" >
<div class="content">
<div onclick="togglePopup()" class="close-btn" style="float: right; width:30px">
×
</div>
<h3>Popup</h3>
<p>
</p>
</div>
</div>
</body>
<script>
function togglePopup() {
$("#m").toggle();
}
$(document).ready(function(){
function fetchdata(){
$.ajax({
url:'sql_read.php',
success:function(data){
$("#main").html(data);
}
})
}
fetchdata();
//.......delete code..........///
$(document).on("click",".del",function(){
var A=confirm("Are you sure you want to delete?")
if(A){
var name=$(this).data("name");
//alert(name);
$.ajax({
url:"sql_delete.php",
data:{nm:name},
success:function(data){
if(data==1){
//$("#a").html("data deleted");
fetchdata();
}
}
})
}
})
//Editdocument..........
$(document).on("click",".edit",function(){
var name=$(this).data("name");
//alert(name);
$("#m").slideDown();
$.ajax({
url:"sql_edit.php",
data:{nm:name},
success:function(result){
$("p").html(result);
}
})
})
//update document......
$(document).on("click",".sav",function(){
//alert("hello save button pressed");
var nm=$(this).data("name");
// alert(nm);
var p=$("#pwe").val();
//alert(p);
$.ajax({
url:"sql_update.php",
data:{nm1:nm,pwd:p},
//data:{nm1:nm},
success:function(result){
// $("#a").html(result);
if(result==1){
$("#a").html("data updated");
fetchdata();
}
// $("#a").html(result);
}
})
})
$("#bt").click(function(e){
e.preventDefault();//
// console.log("hello button clicked");
var name=$("#nm").val();
var pwd=$("#pwd").val();
// alert(name);
// alert(pwd);
$.ajax({
url:"sql_insert.php",
type:"Post",
data:{nm:name,pwd:pwd},
success:function(result){
if(result==1){
$("#F").trigger("reset");
fetchdata();
//$("#a").html("data inserted successfully");
}
else{
//$("#a").html("data not inserted ");
}
//$("#a").html(result);
}
})
})
})
</script>
</html>
Comments
Post a Comment