如何使用javascript将表单数据附加并保存到txt文件

Question

I have this html code:

<form  action="" method="post" id="formToSave">
                <h1>Subscribe For Latest Blogs</h1>
                <p>Please subscribe in my website using your email address for latest updates about my blogs and publications.</p>
                <div class="email-box">
                    <i class="fas fa-envelope"></i>
                    <input class="tbox" type="email" name="email" id ="email" value="" placeholder="Enter Your Email Address">
                    <m><button class="btn" type="submit" name="button" onclick="saveFile()" >Subscribe</button></m>
                </div>
            </form>

And also have this javascript code:

<script>
    let saveFile = () => {
        const email = document.getElementById('email');
        let data = email.value;
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        }
</script>

I want to save the email address form data to a text file and append further email addresses to that file. what should I do next?

Answer 1

First of all, i recommend doing this in a server because browser javascript doesn't have access to the file system and cannot append new text into a file. However, if you need a text file with the emails given by only one client, the following code might help. Keep in mind that this will only work on the client's side and it wont help for a subscribe system without a server.

 const emailsList = [] function addEmailToList() { const email = document.getElementById('email') const { value } = email emailsList.push(value) } function downloadFile() { const textFile = btoa(emailsList.join('\\n')) const saveElement = document.createElement('a') saveElement.href = `data:text/plain;base64,${textFile}` saveElement.download = 'myList.txt' document.body.appendChild(saveElement) saveElement.click() document.body.removeChild(saveElement) }

 <form action="" method="post" id="formToSave"> <h1>Subscribe For Latest Blogs</h1> <p>Please subscribe in my website using your email address for latest updates about my blogs and publications.</p> <div class="email-box"> <i class="fas fa-envelope"></i> <input class="tbox" type="email" name="email" id="email" value="" placeholder="Enter Your Email Address" /> <m><button class="btn" type="button" name="button" onclick="addEmailToList()">Subscribe</button></m> <m><button class="btn" type="button" name="button" onclick="downloadFile()">Download TextFile</button></m> </div> </form>