CRUD Operation

PHOTO
Tue Sep 05 2023 07:23:02 GMT+0000 (Coordinated Universal Time)
<!DOCTYPE html>
<html>

<head>
    <title>
        JavaScript CRUD
    </title>
	<style>.login_form{
    display: grid;
    width: 97%;
    grid-template-columns: 1fr 1fr;
    gap: 47px;
    margin-inline: 18px;
    
}
.Filter{
    width: 95%;
    padding: 10px;
    margin-top: 4px;
    border-radius: 7px;
    border: 1px solid #ccc;
}
.input{
    padding: 0px 0px 20px;
}
.input label{
    padding-bottom: 5px;
    color: #1b1e26;
}
.btnsearch{
    width: 100%;
    display: flex;
    justify-content: end;

}
 /*End */ 
.main{
    border-radius: 10px;
    background-color: white;
    margin: 2%;
    padding: 5px;
    margin-block: -14px;
    height: auto;
}
h1{
    color: #1b1e26;
        display: flex;
        justify-content: center;
        font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}
::placeholder{
    color: #1b1e26;
}
.crtbtn{
    width: 102px;
    height: 41px;
    border-radius: 7px;
    padding: 7px;
    font-size: 18px;
    background-color: #1b1e26;
    border: none;
    color: white;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    float: right;
    margin-top: -60px;
    margin-inline: 18px
}
.formFilter{
    box-sizing: border-box;
    width: 97%;
    margin-inline-start: 2%;
    margin-top: 34px;
    
    }

.reset{
    width: 102px;
    height: 41px;
    border-radius: 7px;
    padding: 7px;
    font-size: 18px;
    background-color: #1b1e26;
    color: white;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    margin-inline: 16px;
    border: none;
}
.search{
    width: 102px;
    height: 41px;
    border-radius: 7px;
    padding: 7px;
    font-size: 18px;
    background-color: #dfdfdf; 
    color: #1b1e26;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    border-color: #1b1e26;
    margin-inline: -15px;
    border: none;
}
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #40f75c;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 30px;
    font-size: 17px;
  }
  
  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 1.5s, fadeout 0.5s 2.5s;
  }
  
  @-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {top: 30px; opacity: 1;} 
    to {top: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0; opacity: 0;}
  }

body{
    margin-block: 10px;
    padding-block: 27px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    background-color: #1b1e26;
}
.employee-form {
    padding: 10px;
    margin: auto;
    width: 98%;
    padding: 5px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}
.employees-table {
    padding: 20px;
    margin: auto;
    width: 98%;
    padding: 5px;
    color : rgb(255, 255, 255);
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}
body > table{
    width: 80%;
}
table{
    border-collapse: collapse;
}
table.list{
    width:100%; 
}
td{text-align: center;
    padding: 8px;
    color:#1b1e26;
    background-color: white;
    border: 1px solid #1b1e26;
} 
th {
    border: 1px solid #ffffff;
    text-align: center;
    padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
    background-color: #1b1e26;
}
.modal{
        justify-content: center;
        display: flex;
        align-content: center;
        background-color: #a3b5f0;
        width: 99%;
        height: auto;
        margin: 9px;
        padding-block: 35px;
        border-radius: 10px;
    }
    h2.texthead {
        margin-inline: 16px;
        color: #1b1e26;
    }
.close{
    float: right;
    margin-inline: 19px;
    margin-top: -55px;
    font-size: 31px;
    color: #1b1e26;
    }
.text{
        color: #1b1e26;
        font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
        padding-block: -6px;
    }
.inpcss{
        width: 100%;
        padding: 8px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
        color: #1b1e26;

    }
.btnupdate{
    width: 97px;
    height: 41px;
    border-radius: 7px;
    padding: 7px;
    font-size: 18px;
    background-color:#a3b5f0;
    border-color: #63835f;
    color: #1b1e26;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    float: right;
    margin-top: -16px;
    margin-right: 19px;
    }
.mastersearch{
    padding: 10px;
    height: 39px;
    width: 221px;
    margin-right: 29px !important;
    margin: 15px;
    border-radius: 6px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    border-style: groove;
    box-sizing: border-box;
    border-radius: 7px;
    color:#1b1e26;
    border: 1px solid #ccc;
    
}


input[id="fullName"],input[id="email"],input[id="salary"],input[id="city"]{
    width: 100%;
    padding: 8px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    color: #1b1e26;
    
}

input[type=submit] {
    width: 102px;
    height: 41px;
    background-color: #1b1e26;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    font-size: 18px;
    margin-inline: 15px;
    
}
form div.form-action-buttons{
    text-align: right;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}
::placeholder{
    color: #1b1e26;
}
a{
    cursor: pointer;
    text-decoration: underline;
    margin-right: 4px;
}
label.validation-error{
    color:   red;
    margin-left: 5px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}
.hide{
    display:none;
}
	
	</style>
</head>
<body>


    <div class="main"><h1 class="h1" >Employee Master</h1>
    <button onclick="toggleForm();hidefilter();issave()" class="crtbtn" id="createButton">Create</button>

    <hr>
    <!-- The Edit Modal -->
<!-- The Edit Modal -->
<div id="editModal" class="modal" style="display:none;">
    <div class="modal-content">
        <span><h2 class="texthead">Edit Detail</h2></span>
        <span class="close" onclick="closeEditModal()">&times;</span>
        <hr class="hr">
        <div class="login_form">
        <div class="input">
            <label class="text">Full Name</label>
            <input type="text" id="editFullName" class="inpcss">
        </div>
        <div class="input">
        <label class="text">Email</label>
        <input type="text" id="editEmail" class="inpcss">
        </div>
    </div>
    <div class="login_form">
        <div class="input">
            <label class="text">Salary</label>
            <input type="text" id="editSalary" class="inpcss">
            </div>
            <div class="input">
            <label class="text">City</label>
            <input type="text" id="editCity" class="inpcss">
            </div>
            </div>
            <button id="updateButton" onclick="updateRecord()" class="btnupdate">Update</button>
            </div>
</div>

<div id="snackbar">Record Successfully Saved</div>
    <div class="employee-form" id="employeeForm" style="display:none;">
        <form onsubmit="event.preventDefault();onFormSubmit();snackerbar()" autocomplete="off">
            <div class="login_form">
                <div class="input">
                    <label>Full Name*</label><label class="validation-error hide" id="fullNameValidationError">This field is required.</label>
                    <input type="text" name="fullName" id="fullName" >
                </div>
                <div class="input">
                    <label>Email Id</label>
                    <input type="text" name="email" id="email" >
                </div>
            </div>
            <div class="login_form">
            <div class="input">
                <label>Salary</label>
                <input type="text" name="salary" id="salary" >
            </div>
            <div class="input">
                <label>City</label>
                <input type="text" name="city" id="city" >
            </div>
            </div>
            <div class="form-action-buttons">
                <input type="submit" value="Save" >
            </div>
        </form>
    </div>
   <div id="formFilter" class="formFilter">
    <div class="login_form">
        <div class="input">
            <label>Full Name</label>
            <input type="text"  class="Filter">
        </div>
        <div class="input">
            <label >Email</label>
            <input type="text"  class="Filter">
        </div>
    </div>
    <div class="login_form">
        <div class="input">
            <label>City</label>
            <input type="text" class="Filter">
        </div>
        <div class="input">
            <label>Salary</label>
            <input type="text" class="Filter">
        </div>
    </div>
    <div>
        <button id="Reset" class="reset" type="reset">Reset</button>
        <button id="search" class="search" type="search">Search</button>
    </div>
   </div>
<hr id="hideme">
<div class="btnsearch"><input type="search" name="" class="mastersearch" id="MasterSearch" placeholder="Search..."></div> 
    <div class="employees-table" id="employeestable">
        <table class="list" id="employeeList">
            <thead>
                <tr id="tr">
                    <th>Full Name</th>
                    <th>Email Id</th>
                    <th>Salary</th>
                    <th>City</th>
                    <th>Actions</th>
                    
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div></div>
    <script>
	var isFormVisible = false;
var isFilterVisible = true;
var isTableVisible = true;
var isSearchVisible = true;
var isLineVisible = true;
let editingRow = null;
function toggleForm() {
    isFormVisible = !isFormVisible;

    var createButton = document.getElementById("createButton");
    var employeeForm = document.getElementById("employeeForm");
    var formFilter = document.getElementById("formFilter");
    var employeesTable = document.getElementById("employeestable");
    var masterSearch = document.getElementById("MasterSearch");
    var line = document.getElementById("hideme");

    if (isFormVisible) {
        employeeForm.style.display = "block";
        createButton.innerText = "Cancel";
        console.log("Form is visible");
        
        // Hide other elements
        formFilter.style.display = "none";
        employeesTable.style.display = "none";
        masterSearch.style.display = "none";
        line.style.display = "none";
    } else {
        employeeForm.style.display = "none";
        createButton.innerText = "Create";
        console.log("Form is hidden");
        resetForm();

        // Show other elements
        formFilter.style.display = "block";
        employeesTable.style.display = "block";
        masterSearch.style.display = "block";
        line.style.display = "block";
    }
}

var isFiltervisible = true;
var istablevisible = true;
var issearchvisible = true;
var islinevisible = true;


function hidefilter() {

    isFiltervisible = !isFiltervisible;
    istablevisible = !istablevisible;
    issearchvisible =!issearchvisible;
    islinevisible = !islinevisible;

    var Filterform = document.getElementById("formFilter");
    var table = document.getElementById("employeestable");
    var search = document.getElementById("MasterSearch");
    var line = document.getElementById("hideme");

    if(isFiltervisible && istablevisible && islinevisible){

        Filterform.style.display = "block";
        table.style.display = "block";
        search.style.display = "block";
        line.style.display = "block";
    }else{
        Filterform.style.display = "none";
        table.style.display = "none";
        search.style.display = "none";
        line.style.display = "none";
        resetForm();
    }    
}



var save = document.getElementById("submit");
var employeeForm = document.getElementById("employeeForm");
var formFilter = document.getElementById("formFilter");
var employeesTable = document.getElementById("employeestable");
var masterSearch = document.getElementById("MasterSearch");
var line = document.getElementById("hideme");
function issave() {
    var employeeForm = document.getElementById("employeeForm");
    if(validate()) addEventListener('click',(save)=>{
        employeeForm.style.display = "none";
        formFilter.style.display = "block";
        employeesTable.style.display = "block";
        masterSearch.style.display = "block";
        line.style.display = "block";
    })
    else{
        employeeForm.style.display = "block";
        formFilter.style.display = "none";
        employeesTable.style.display = "none";
        masterSearch.style.display = "block";
        masterSearch.style.display = "none";
        line.style.display = "none";
    }
}

var isnotvisibleform = false;
function onEdit(td) {
    isnotvisibleform = !isnotvisibleform;
    var edit = document.getElementById("employeeForm");
    if(isnotvisibleform){
        edit.style.display = "block";
        selectedRow = td.parentElement.parentElement;
    document.getElementById("fullName").value = selectedRow.cells[0].innerHTML;
    document.getElementById("email").value = selectedRow.cells[1].innerHTML;
    document.getElementById("salary").value = selectedRow.cells[2].innerHTML;
    document.getElementById("city").value = selectedRow.cells[3].innerHTML;
    }else{
        edit.style.display = "none";
    }
}

var selectedRow = null

function onFormSubmit() {
    if (validate()) {
        var formData = readFormData();
        if (selectedRow == null)
            insertNewRecord(formData);
        else
            updateRecord(formData);
        resetForm();
        
        // After saving, hide the form and show other elements
        toggleForm();
        snackerbar();
    }
}
function snackerbar() {
    var x = document.getElementById("snackbar");
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  }

function readFormData() {
    var formData = {};
    formData["fullName"] = document.getElementById("fullName").value;
    formData["email"] = document.getElementById("email").value;
    formData["salary"] = document.getElementById("salary").value;
    formData["city"] = document.getElementById("city").value;
    return formData;
}

function insertNewRecord(data) {
    var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = data.fullName;
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = data.email;
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = data.salary;
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = data.city;
    cell4 = newRow.insertCell(4);
    cell4.innerHTML = `<a onClick="openEditModal(this)" style= "color:"green";">Edit</a>
                       <a onClick="onDelete(this)" style= "color:"red";>Delete</a>`;
}

function resetForm() {
    document.getElementById("fullName").value = "";
    document.getElementById("email").value = "";
    document.getElementById("salary").value = "";
    document.getElementById("city").value = "";
    selectedRow = null;
}

function onDelete(td) {
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("employeeList").deleteRow(row.rowIndex);
        resetForm();
    }
}
function validate() {
    isValid = true;
    var fullName = document.getElementById("fullName").value;
    if (fullName.trim() === "") {
        isValid = false;
        document.getElementById("fullNameValidationError").classList.add("hide");
    } else {
        isValid = true;
        if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
            document.getElementById("fullNameValidationError").classList.add("hide");
    }
    return isValid;
}



// Function to open the edit modal


// Function to open the edit modal
function openEditModal(td) {
    editingRow = td.parentElement.parentElement;
    const fullName = editingRow.cells[0].innerHTML;
    const email = editingRow.cells[1].innerHTML;
    const salary = editingRow.cells[2].innerHTML;
    const city = editingRow.cells[3].innerHTML;

    // Populate the edit modal fields
    document.getElementById('editFullName').value = fullName;
    document.getElementById('editEmail').value = email;
    document.getElementById('editSalary').value = salary;
    document.getElementById('editCity').value = city;

    // Display the edit modal
    document.getElementById('editModal').style.display = 'block';
}
// Function to close the edit modal
function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
    editingRow = null;
}

// Function to update the record
function updateRecord() {
    if (editingRow) {
        // Update the data in the table
        editingRow.cells[0].innerHTML = document.getElementById('editFullName').value;
        editingRow.cells[1].innerHTML = document.getElementById('editEmail').value;
        editingRow.cells[2].innerHTML = document.getElementById('editSalary').value;
        editingRow.cells[3].innerHTML = document.getElementById('editCity').value;

        // Close the edit modal
        closeEditModal();
    }
}
	</script>
        
</body>

</html>
COPY
CRUD Operation

Save snippets that work from anywhere online with our extensions

Comments

More like this

CRUD

Browse more snippets >>

CRUD Operation

Save snippets that work from anywhere online with our extensions

Comments

More like this

CRUD

Browse more snippets >>

Embed code snippet
