Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 11.2019 — #maybe just 'wrap' the content editable elements ...
</html>
Save Multiple Content Editable Inputs with localStorage
I have two content editable inputs at the top of the .workspaceMain class, one .mainHeader and the other .tableName.
I have created a save button at the top of the.workspaceMain class, within the .toolbar. I have also made an id of #edit within each of the .mainHeader and .tableName code sequences to work within the JavaScript code.
When I have one id of #edit within the .mainHeader code sequence and go to press the .saveContent button after changing the text, I refresh and the text is updated to the changed text.
If I have the id of #edit within .tableName however, when I go to change the text, save and refresh, the text of .tableName isn’t updated once saved.
How would I update my JavaScript code to accommodate for allowing multiple Content Editable inputs to be saved at once.
I have tried making the id’s unique using #edit1, #edit2 with changing the JavaScript to suit like so with no luck.
**JS
“`
` function saveEdits() {
var editElem = document.getElementById(“edit1”);
var userVersion = editElem.innerHTML;
localStorage.userEdits = userVersion;
}
function checkEdits() {
if(localStorage.userEdits!=null)
document.getElementById(“edit2”).innerHTML=localStorage.userEdits;
}
function saveEdits() {
var editElem = document.getElementById(“edit1”);
var userVersion = editElem.innerHTML;
localStorage.userEdits = userVersion;
}
function checkEdits() {
if(localStorage.userEdits!=null)
document.getElementById(“edit2”).innerHTML=localStorage.userEdits;
}`
**HTML
“`
`<!DOCTYPE HTML>
<!–
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
–>
<html lang=”en-AU”>
<head>
<title>Welcome — Summit — Kempsey Adventist School</title>
<link rel=”stylesheet” type=”text/css” href=”../style.css”> <!– Internal Stylesheet –>
<script src=”https://kit.fontawesome.com/d3afa470fb.js”></script> <!– Vector Icons –>
<link rel=”shortcut icon” href=”../Assets/Images/favicon.png”> <!– Favicon –>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0″>
</head>
<body onload=”checkEdits()”>
<?php
session_start();
if (!isset($_SESSION[‘loggedin’]) || $_SESSION[‘loggedin’] == false ) {
header(“Location: index.php”);
}
?>
<div id=”wrapper”>
<div class=”navigation”>
<button class=”navLinks” title=”Logout”><i class=”fas fa-sign-out-alt”></i></button>
<button class=”navLinks” title=”Help”><i class=”fas fa-question-circle”></i></button>
<button class=”navLinks” title=”Quick Links”><i class=”fas fa-bookmark”></i></button>
<div class=”menuDropDown”>
<button class=”menuButton” title=”Site Navigation”><i class=”fas fa-bars”></i> Menu</button>
<div class=”menuContent”>
<div class=”menuRow”>
<div class=”menuColumn”> <!– Home Workspace –>
<h5 class=”menuHeader”>Home Workspace</h5>
<a href=”#” title=”Welcome” class=”current”><i class=”fas fa-door-open”></i> Welcome</a>
</div>
<div class=”menuColumn”> <!– Learning Workspace –>
</div>
<div class=”menuColumn”> <!– Student Management Workspace –>
</div>
<div class=”menuColumn”> <!– Administration Workspace –>
</div>
</div>
</div>
</div>
</div>
<div class=”workspaceMain”>
<div class=”toolbar”>
<button class=”saveContent” onclick=”saveEdits()” title=”Save Changes”><i class=”fas fa-save”></i> Save</button>
<button class=”toolLinks” title=”Collapse Panel”><i class=”fas fa-arrow-right”></i></button>
<button class=”toolLinks” title=”Change Background Colour”><i class=”fas fa-fill-drip”></i></button>
</div>
<h3 class=”mainHeader” id=”edit1″ contenteditable=”true”>KEMPSEY ADVENTIST SCHOOL</h3>
<table class=”tableSet”>
<caption class=”tableName” contenteditable=”true”>Weekly Outline</caption>
</table>
</div>
<div class=”workspaceSide”></div>
</div>
</body>
</html>`
Sign in
to post a comment6 Comments(s) ↴
0
@daveyerwinJul 11.2019 — #maybe just 'wrap' the content editable elements ...``<i>
</i><!DOCTYPE HTML>
<html lang="en-AU">
<head>
<title>Welcome &#8212; Summit &#8212; Kempsey Adventist School</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script><!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
</head>
<body>
<div class="toolbar">
<button class="saveContent" onclick="saveEdits()" title="Save Changes"><i class="fas fa-save"></i> Save</button>
</div>
<div id=editableStuff>
<h3 class="mainHeader" contenteditable="true">KEMPSEY ADVENTIST SCHOOL</h3>
<table class="tableSet">
<caption class="tableName" contenteditable="true">Weekly Outline</caption>
</table>
</div>
<script>
var editElem = document.getElementById("editableStuff");
function saveEdits() {
localStorage.userEdits = editElem.innerHTML; }
function checkEdits() {
if(localStorage.userEdits !=null )
editElem.innerHTML=localStorage.userEdits; }
checkEdits();
</script>
</body><i>
</i>``</html>