ivoruJavaBoy ivoruJavaBoy - 5 months ago 19
Javascript Question

HTML page that save its content, replacing the HTML file itself

I've to create a html page that auto-save its content.

This page is just a report of the activities of 4 days, that should be updated by some user.

enter image description here

This page will be used just for 3/4 days (Go live summary status page, and this say i all).. So I don't wanna lose time with backend, but I wanna do something like a trick just on client side, Javascript and HTML.

What I would like to do:

A user access to the page, this page is published on our internal server, update the status of the task and save the page! I thought to do this in two ways:


  • Any time I press the save button it just replace the old html content with the new one (replacing the html file itself)

  • Save the content in a plan file that will be loaded everytime the page is used, this second option obviously costs a lot of more work..



Any suggestion? I meant, is there something that help me doing this in just few time? I've about 2 days to finish this :(

UPDATE: Guys maybe i'm not explaining myself so good, am i thinking so wrong if i suppose just something like this:

Javascript function that when you click the save button replace the old html server file with the new one containing the row updated...

Easy easy easy...! I'm a backend developer.. not a lot of experience with beautiful styled front end pages :)

UPDATE: By your answer i'm assuming that is NO WAY to do this, without a backend side logic, even if light one, but its not possible to achieve this just with a client side scripting.. I already thought at this, but i was hoping there is some kind of trick that allows to do this without place anything on the server side.. :(

Answer
<html>
    <head>
        <title>Button Writer</title>
    </head>

    <body onload="read()">
         <!--<button onclick="writeInFile()">Save</button> -->
         <input type="button" id="somebutton" onclick="addText()">
         <input type="text" id="myText" placeholder="Enter Name Here">
         <div id="text2"></div>
    </body>


    //read a file and write content in text2 div, please set your path
<script>

function read(){
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function(){document.getElementById("text2").innerHTML=xhr.responseText;};
xhr.open("GET","file.txt"); //SET YOUR PATH
xhr.send();
}

function addText()
        {
            document.getElementById('text2').innerHTML += document.getElementById('myText').value;
        }



</script>
</html>

To write in file you should use AJAX + PHP. If you want I'll tell you how