Search code examples
htmltextdata-collection

How to save and view a text entry made by a user in HTML


I have a website where I want users to be able to submit text that I can review and later post as text that people cannot edit. I have the feature of writing and saving the information for later, but I am unable to access that text.

Here is the code simplified to the text entering and saving part (the rest is styling and what not):

<html>
<head>
<title> Submit Text </title>
<script type="text/javascript">
function saveEdits() {

//get the editable element
var editElem = document.getElementById("edit");

//get the edited element content
var userVersion = editElem.innerHTML;

//save the content to local storage
localStorage.userEdits = userVersion;

//write a confirmation to the user
document.getElementById("update").innerHTML="- Edits saved!";

}
function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<p>
<div id="edit" contenteditable="true">
<p>
Here is the element's original content
</p>
</div>
<p>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"><p> - Edit the text and click to save for next time</div></p>
</body> 

Here is a link to my site in case you want to see what I am talking about in action: https://chattah.neocities.org/ChattahStory.html

This is a new feature to my site that I have been working on

What am I missing to be able to collect the data? I really don't want to move to PHP because the website host does not support PHP, but if PHP is the only way it is fine Thanks


Solution

  • You are storing the data to local storage - the client's own computer. Naturally, you can't access that. Right now, you are using JavaScript as a client-side language. You need a server side language to grab the input data. PHP is one that I am familiar with. But if you really want to stick with JavaScript, Node.js is probably your best bet.