How to save form data in a Text file using JavaScript

Last updated: 12th March 2025

I am sharing a simple example here 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.

The Markup

<!DOCTYPE html>
<html>
<head>
    /*  add style to the form elements */
    <style>
        * { box-sizing: border-box; }
        div {
            padding: 10px;
            background-color: #f6f6f6;
            overflow: hidden;
        }
        input[type=text], textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{ 
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
</head>
<body>
    <div>
        <!--Add few elements to the form-->
        <div><input type="text" id="txtName" placeholder="Enter your name" /></div>
        <div><input type="text" id="txtAge" placeholder="Enter your age" /></div>
        <div><input type="text" id="txtEmail" placeholder="Enter your email address" /></div>
        <div>
            <select id="selCountry">
                <option selected value="">-- Choose the country --</option>
                <option value="India">India</option>
                <option value="Japan">Japan</option>
                <option value="USA">USA</option>
            </select>
        </div>
        <div>
            <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
        </div>

        <!--Add a button to save the data.-->
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
    </div>
</body>

The Script

<script>
    let saveFile = () => {
    	
        // Get the data from each element on the form.
    	const name = document.getElementById('txtName');
        const age = document.getElementById('txtAge');
        const email = document.getElementById('txtEmail');
        const country = document.getElementById('selCountry');
        const msg = document.getElementById('msg');
        
        // This variable stores all the data.
        let data = `
            Name: ${name.value} 
            Age: ${age.value} 
            Email: ${email.value} 
            Country: ${country.value} 
            Message: ${msg.value}`;
        
        // Convert the text to BLOB.
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';	   // The file to save the data.

        let newLink = document.createElement("a");
        newLink.download = sFileName;

        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);
        }

        newLink.click(); 
    }
</script>
</html>

Try it

I have designed a simple form using CSS and few HTML <input> elements along with a <select> dropdown list. I idea behind using so many elements is to show you how you can save form data in text file using values extracted from different input elements.

Inside the script, the first thing I am doing is getting all the values from each input element.

Later, using template literal to construct a string with the form data, so that it can be converted into a BLOB object.

let data = `
    Name: ${name.value} 
    Age: ${age.value} 
    Email: ${email.value} 
    Country: ${country.value} 
    Message: ${msg.value}`;

Note: Template literals in JavaScript are enclosed by backticks (``) and allow for embedded expressions using ${}. They make string construction much cleaner and more readable, especially when inserting variables.

Next, I am creating a Link (the anchor tag) (which is not visible anywhere on the form) and assigning the text file as the link’s download property.

let newLink = document.createElement("a");
newLink.download = sFileName;

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);
}

👉 Do you know you can convert your Form data into PDF using JavaScript? Check this out.

What is BLOB?

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, you can convert ordinary texts into Blob objects.

You can see the BLOB value (attached to the link’s URL or <a> 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);    // add this line and see the result in your browser's console window.
}

The above image shows the <a> 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 <a> 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. See this example.

← PreviousNext →