How can store form data in jQuery?

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.

Table of Contents Show

How to save FormData in jQuery?
How to store FormData in local storage using jQuery?
How to use FormData in jQuery?
How to store FormData in 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>
    
    <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>
        
        <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>

        
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
    </div>
</body>

👉 You may like this. How to read a text file (a .txt file) using JavaScript.

The Script

<script>
    let saveFile = () => {
    	
        
    	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');
        
        
        let data = 
            '\r Name: ' + name.value + ' \r\n ' + 
            'Age: ' +age.value + ' \r\n ' + 
            'Email: ' + email.value + ' \r\n ' + 
            'Country: ' + country.value + ' \r\n ' + 
            'Message: ' + msg.value;
        
        
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';	   

        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

Please do not get overwhelmed by the size of the program. The code inside the <script> tag is important.

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 element.

Later, I am creating a string (using the values), so that I can convert the whole string into a BLOB object.

let data = 
    '\r Name: ' + name.value + ' \r\n ' + 
    'Age: ' +age.value + ' \r\n ' + 
    'Email: ' + email.value + ' \r\n ' + 
    'Country: ' + country.value + ' \r\n ' + 
    'Message: ' + msg.value;

The \r\n is for new line or line breaks, so that each data can be written in a new line in the text file.

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

👉 Now, you can also convert your Form data into PDF 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 <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);    
}

image

The 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. Check out this post.

That's it. Thanks for reading. ☺

← PreviousNext →

How to save FormData in jQuery?

Download & unzip the plugin and load the minified version of the Save My Form plugin after jQuery. 2. Attach the function saveMyForm to your HTML form and done. });

How to store FormData in local storage using jQuery?

var formData = { set : function (){ var formData = []; // Here we are defining the array of elements localStorage. removeItem('formData '); $('form input[type=text]'). each(function(){ //loop through form input fields formData . push({ name: this.name, value: this.

How to use FormData in jQuery?

The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Parameter: It does not accept any parameter.

How to store FormData in JavaScript?

FormData Methods.

append(name, value) – add a form field with the given name and value ,.

append(name, blob, fileName) – add a field as if it were <input type="file"> , the third argument fileName sets file name (not form field name), as it were a name of the file in user's filesystem,.