"Save Form Data"
Bootstrap 4.1.1 Snippet by Umerfarooq

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Save form Data in a Text File using JavaScript</title> <!--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> <div> <input type="button" id="bt" value="Save data to file" onclick="saveFile()" /> </div> </div> </body> </html>
<style> * { box-sizing: border-box; } div { padding: 10px; background-color: #f6f6f6; overflow: hidden; } input[type=text], textarea, select { font: 17px Calibri; width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; } input[type=button]{ font: 17px Calibri; width: auto; float: right; cursor: pointer; padding: 7px; } </style> </head> <body> <div>
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 = '\r Name: ' + name.value + ' \r\n ' + 'Age: ' +age.value + ' \r\n ' + 'Email: ' + email.value + ' \r\n ' + 'Country: ' + country.value + ' \r\n ' + '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>

Related: See More


Questions / Comments: