CODEWITHSUNDEEP
javascripthtml
wariacik
wariacik

Reputation: 345

Save html textarea state

I am looking for a way to save state of text areas. Right now if I click the save button I am getting html without changes that I have made in text areas. Is there any way to save the html file with the comments inserted into text area?

So basically a user is getting a simple html file locally, he opens it in browser and makes comments to the table rows on the left. After he finish, he clicks the save button, saves the file so another person can read his comments.

<html>
<body>
<script type='text/javascript'>

function saveTextAsFile()
{


var textToWrite = document.getElementsByTagName('html')[0].innerHTML
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = "CommentedLog.html"

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
</script>
<input type="button" value="save" onclick="saveTextAsFile()">
<table>
<tr><td>Test</td><td>Test2</td><td><textarea>Insert comment here...</textarea></td></tr>
<tr><td>Test</td><td>Test2</td><td><textarea>Insert comment here...</textarea></td></tr>
</table>
</body>

</html>

The number of rows to comment will be created dynamically.

Upvotes: 1

Views: 1859

Answers (2)

Roger
Roger

Reputation: 1

No you can't do this with client side JS only due to browser security policy — JS code on a web page does not have access to file system. That means you are not able to modify and save changes in a file on your disk.

On the other hand you can create simple web server where you will send entire HTML of a page (with comments). And server will update your HTML file on file system.

Upvotes: 0

myhappycoding
myhappycoding

Reputation: 658

Just add this at the begining of your function:

var textareas=document.getElementsByTagName('textarea');
    textareas[0].textContent=textareas[0].value;

these instructions will update the textarea content

Upvotes: 1

Related Questions