<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>User Management</title>
<link href="images/bg.jpg" rel="stylesheet">
<link href="Css/Style.css" rel="stylesheet">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script src="js/retrive.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/
jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/
dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://cdn.datatables.net/1.10.16/js
/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/
1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.3.1/jquery.min.js"></script>
<!-- Popper JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js
/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/
js/bootstrap.min.js"></script>
<script src="demo_list.js"></script>
<style>
th {
background-color: #4CAF50;
color: white;
}
</style>
</head><body>
<!-- style="background-image:url(images/abc.jpg);" -->
<div class="container" style="margin:20px" >
<a href="demo_add.html"><input type="submit" value="ADD" class="btn btn-sm btn-success"></a>
<table class="table table-striped table-bordered" id="example" >
<tr><th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>ADDRESS</th>
<th>PHONE NO</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
<tbody id="dataa">
</tbody>
</table></div>
</body>
</html>
demo_list.js
demo_edit.html
$(function(){
//$('#example').DataTable();
sessionStorage.setItem("id",null)
$.ajax({
url:"http://127.0.0.1:3001/crud",
type:"get",
data:"",
success:function(json)
{
var result=JSON.parse(json);
$.each(result,function(i,f){
var tr= "<tr><td>"+f.id+"</td>"+
"<td>"+f.name+"</td>"+
"<td>"+f.email+"</td>"+
"<td>"+f.address+"</td>"+
"<td>"+f.phno+"</td>"+
"<td><i onClick='javascript:Edit(this.id)'
class='fa fa-edit' id="+f.id+"></td></i>"+
"<td><i onClick='javascript:Delete(this.id)'
class='fa fa-trash' id="+f.id+"></td></i></tr>";
$('#dataa').append(tr);
});
},
error:function(jqXHR, textstatus, errorThrown)
{
}
});
});
function Edit(id){
sessionStorage.setItem("id",id)
window.location.assign("demo_add.html");
}
function Delete(id){
alert(id);
var a=JSON.stringify({ "id":id });
alert(a);
$.ajax({
url:"http://127.0.0.1:3001/crud",
type:"delete",
contentType: "application/json" ,
data:a,
dataType: "text" ,
processdata: true ,
success: function (json) {
alert('hello');
},
});
location.reload();
}
demo_edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3
.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.
js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0
/js/bootstrap.min.js"></script>
<script src="demo_add.js"></script>
</head>
<body>
<div class="container" >
<div class="card" style="margin-top:20px" >
<div class="card-header bg-primary" style="color:white">
<p id="demo" >Add New User</p></div>
<div class="card-body">
<form name="myform" autocomplete="off" >
<div class="container">
<div class="row">
<div class="col-md-6" style="display:none">
<label >ID</label>
<input type="hidden" name="id" value="new" id="id">
</div>
<div class="col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="name1" id="name1" >
</div>
<div class="col-md-6">
<label>Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
<div class="col-md-6">
<label>Address</label>
<input type="text" class="form-control" name="address" id="address">
</div>
<div class="col-md-6">
<label>Phone No</label>
<input type="number" class="form-control" name="phno" id="phno">
</div>
</div>
</div>
<div style="float:right">
<div class="col-md-12" style="margin-top:10px;">
<input type="button" class="btn btn-sm btn-success" value="Save"
onclick="myfunction()">
<a href="/index.html" class="btn btn-sm btn-success " >Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
demo_add.js
var count=1;
$(function(){
$.getJSON('/all',function(data){
$.each(data, function(i,f){
});
});
var id=sessionStorage.getItem("id");
if(!(id==null)){
$.getJSON("http://127.0.0.1:3001/crud/"+id,function(data){
$.each(data,function(key,val){
alert(id)
document.getElementById("demo").innerHTML="Edit User";
document.getElementById("id").value=id;
document.getElementById("name1").value=val.name;
document.getElementById("email").value=val.email;
document.getElementById("address").value=val.address;
document.getElementById("phno").value=val.phno;
});
})
}
});
function myfunction(){
var id=$('#id').val();
alert(id)
var name=document.getElementById("name1").value;
var email=document.getElementById("email").value;
var address=document.getElementById("address").value;
var phno=document.getElementById("phno").value;
var letters = /^[A-Za-z]+$/;
if(document.myform.name1.value==""){
document.getElementById("name1").focus();
document.getElementById("demo").innerHTML='Please Enter Your Name';
return false;
}
if(!(name1.value.match(letters))){
document.getElementById("name1").focus();
document.getElementById("demo").innerHTML='Please Enter only letters in Name';
return false;
}
if(document.myform.email.value==""){
document.getElementById("email").focus();
document.getElementById("demo").innerHTML='Please Enter Your Email';
return false;
}
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myform.email.value)))
{
document.getElementById("email").focus();
document.getElementById("demo").innerHTML='Please Enter valid email ';
return false;
}
if(document.myform.phno.value==""){
document.getElementById("phno").focus();
document.getElementById("demo").innerHTML='Please Enter Your Phone No';
return false;
}
var type="PUT";
if(id=="0"){
type="POST";
id="22";
}
var postData="name="+name
+"&email="+email
+"&address="+address
+"&id="+id
+"&phno="+phno;
$.ajax({
url:"http://127.0.0.1:3001/crud",
type:type,
data:postData,
success:function(data, textStatus, jqXHR)
{
window.location.assign("index.html");
},
error: function(jqXHR, textStatus, errorThrown)
{
}
})
}
demo_add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/
umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script src="demo_add.js"></script>
</head>
<body>
<div class="container" >
<div class="card" style="margin-top:20px" >
<div class="card-header bg-primary" style="color:white">
<p id="demo" >Add New User</p></div>
<div class="card-body">
<form name="myform" autocomplete="off" >
<div class="container">
<div class="row">
<div class="col-md-6" style="display:none">
<label >ID</label>
<input type="hidden" name="id" value="0" id="id">
</div>
<div class="col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="name1" id="name1" >
</div>
<div class="col-md-6">
<label>Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
<div class="col-md-6">
<label>Address</label>
<input type="text" class="form-control" name="address" id="address">
</div>
<div class="col-md-6">
<label>Phone No</label>
<input type="number" class="form-control" name="phno" id="phno">
</div>
</div>
</div>
<div style="float:right">
<div class="col-md-12" style="margin-top:10px;">
<input type="button" class="btn btn-sm btn-success" value="Save" onclick="myfunction()">
<a href="index.html" class="btn btn-sm btn-success " >Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment