How to append and save form data to txt file using javascript

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?

Dharman · Accepted Answer · 2020-08-24 05:29:46Z

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>

Collectives™ on Stack Overflow

How to append and save form data to txt file using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related