How to save html form data to text file using javascript

I am sharing a simple example here today that explains how easily you can save your form data in a text file or in a .txt file using JavaScript.

A web form usually has many different elements, mostly input fields. You can extract data from these elements and save it in a database like SQL Server, or simply convert it into a JSON file. You can even save your form data in a text file.

Let’s see the example first.




    Save form Data in a Text File using JavaScript
    


    
id="selCountry">
id="msg" name="msg" placeholder="Write some message ..." style="height:100px">
onclick="saveFile()" />

Try it

Please do not get overwhelmed by the size of the program. The code inside the

Once I have created the link, I’ll assign the BLOB object as the href (or as the URL) to the newly created Link tag.

if (window.webkitURL != null) {
    newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
    newLink.href = window.URL.createObjectURL(textToBLOB);
    newLink.style.display = "none";
    document.body.appendChild(newLink);
}

👉 Now, you can also convert your Form data into PDF using JavaScript.

How to save html form data to text file using javascript

BLOB stands for Binary Large Object. BLOBs are typically, images and audio files, which are converted into Binary and are later stored in a database. Using the Blob() constructor, I can convert ordinary texts into Blob objects.

You can see the BLOB value (attached to the link’s URL or tag that we created in our script) in your browser’s console window. For example,

if (window.webkitURL != null) {
    newLink.href = window.webkitURL.createObjectURL(textToBLOB);
    console.log (newLink);    
}

image

How to save html form data to text file using javascript

The image shows the tag with URL having the blob value. In the console window, copy the URL and paste it in the browser’s address bar. The browser will translate the BLOB and will show the value.

Remember: Every time you click the save button, the script will create a new BLOB from the form data.

The final line of code, simply calls the click event of the tag and the browser downloads the file containing the data in your local hard disc.

newLink.click();

👉 Not just plain text, you can even convert an image into a PDF using only JavaScript. Check out this post.

That's it. Thanks for reading.

← PreviousNext →


How do I save HTML form data to text file?

Step by step guide on How to put the HTML form field data in a text file or dot txt file in PHP.
Create a PHP file and put the below code and save it.
create a new file in the same directory or folder & name it data. txt and save it..
Now run the PHP file. enter any text and hit on submit button and check your data..

How do I save textbox value to .TXT file in HTML using JavaScript?

If you want, you can download the source code of this project (Textarea Text to a File using JavaScript)..
Create a box on the webpage.
... .
Add a heading. ... .
Create a text input box. ... .
Create a box to input the file name. ... .
Create file download button. ... .
Save Text to File with JavaScript..

How can we store form data in database using JavaScript?

Use Case: Create a New Order.
Define Queries. We will define two queries. ... .
Generate XML Schema. ... .
Create the Form. ... .
Link to the Database. ... .
Define the SQL Query. ... .
Generate an XML Schema. ... .
Create the Form. ... .
Link to the Database..

How do I save a text file in JavaScript?

The possible ways to create and save files in Javascript are: Use a library called FileSaver – saveAs(new File(["CONTENT"], "demo. txt", {type: "text/plain;charset=utf-8"})); Create a blob object and offer a “save as”.