Breaking News: Grepper is joining You.com. Read the official announcement!

crud in html javascript

Add Answer

Helpful Hamster answered on June 22, 2021 Popularity 10/10 Helpfulness 3/10

answer crud in html javascript

related javascript crud

related javascript crud operations

related crud operation in javascript

crud in html javascript

Comment

<!DOCTYPE html>
<html>

<head>
    <title>
        JavaScript CRUD Example Tutorial
    </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

	<h1><center>JavaScript CRUD Example Tutorial</center></h1>
	<hr>
			<div class="employee-form">
                <form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
                    <div>
                        <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>
                        <label>Email Id</label>
                        <input type="text" name="email" id="email">
                    </div>
                    <div>
                        <label>Salary</label>
                        <input type="text" name="salary" id="salary">
                    </div>
                    <div>
                        <label>City</label>
                        <input type="text" name="city" id="city">
                    </div>
                    <div  class="form-action-buttons">
                        <input type="submit" value="Submit">
                    </div>
                </form>
		</div>
		<br/>
		<div class = "employees-table">
                <table class="list" id="employeeList">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Email Id</th>
                            <th>Salary</th>
                            <th>City</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
        </div>
    <script src="script.js"></script>
</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.javaguides.net

Tags: crud html javascript

Link to this answer
Share Copy Link

Contributed on Jun 22 2021

Helpful Hamster

0 Answers Avg Quality 2/10

Closely Related Answers

javascript crud

Comment

var selectedRow = null

function onFormSubmit() {
    if (validate()) {
        var formData = readFormData();
        if (selectedRow == null)
            insertNewRecord(formData);
        else
            updateRecord(formData);
        resetForm();
    }
}

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="onEdit(this)">Edit</a>
                       <a onClick="onDelete(this)">Delete</a>`;
}

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

function onEdit(td) {
    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;
}
function updateRecord(formData) {
    selectedRow.cells[0].innerHTML = formData.fullName;
    selectedRow.cells[1].innerHTML = formData.email;
    selectedRow.cells[2].innerHTML = formData.salary;
    selectedRow.cells[3].innerHTML = formData.city;
}

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;
    if (document.getElementById("fullName").value == "") {
        isValid = false;
        document.getElementById("fullNameValidationError").classList.remove("hide");
    } else {
        isValid = true;
        if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
            document.getElementById("fullNameValidationError").classList.add("hide");
    }
    return isValid;
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.javaguides.net

Tags: crud

Link to this answer
Share Copy Link

Contributed on Jul 26 2022

xcv

0 Answers Avg Quality 2/10

javascript crud operations

Comment

// Create
fetch('/api/items', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(newItemData)
});

// Read
fetch('/api/items')
  .then(response => response.json())
  .then(data => {
    // Handle the data
  });

// Update
fetch('/api/items/' + itemId, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(updatedItemData)
});

// Delete
fetch('/api/items/' + itemId, {
  method: 'DELETE'
});

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: crud javascript j

Link to this answer
Share Copy Link

Contributed on Aug 25 2023

Maximilian Steiger

0 Answers Avg Quality 2/10

crud operation in javascript

Comment

-1

a basic CRUD app with Node.js and ReactJS?

Create: Creating a post or adding the table row, adding data into the webpage, or creating content.
Read: Reading or retrieving data from web-page
Update: Updating or editing existing content in the webpage
Deleting: Deleting and removing the entry or content/post from the webpage

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: crud

Link to this answer
Share Copy Link

Contributed on Sep 01 2022

Mohammad alshraideh

0 Answers Avg Quality 2/10

crud in html javascript

Contents

More Related Answers

crud in html javascript

Closely Related Answers

javascript crud

javascript crud operations

crud operation in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.