How to have Javascript function save two text inputs into one text (.txt) file?

Question

So I'm writing a webpage where the user inputs values into two textarea fields, and once they click on the submit button, the program is supposed to initiate a download of both text inputs and save them into a text file. So far, I've figured out how to have only one of the text inputs be saved to the text file, and I've been trying to figure out how to get my Javascript function to have this done for both text inputs. Here is my html and javascript code:

function saveIndex() {
  var myBlob = new Blob([document.getElementById('textbox').value], {
    type: "text/plain"
  });

  var url = window.URL.createObjectURL(myBlob);
  var anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = "textfile.txt";

  anchor.click();
  window.URL.revokeObjectURL(url);
  document.removeChild(anchor);
}

<body>
  <label for="textbox">Textbox1</label>
  <textarea id="textbox1"></textarea>

  <label for="bio">Textbox2</label>
  <textarea id="textbox2"></textarea>

  <button type="button" id="bt" value="Exporter" onclick="saveIndex()" for="textbox"> EXPORT </button>
</body>

I know I need to probably create a new Blob for my second textarea tag, but I've tried that and also tried different ways to implement it into my function without any success. I cannot make another function for the second textarea tag, this must all be done within the current saveIndex() function. Any help would be greatly appreciated!

Other than that, it’s not quite clear what the difficulty is with targeting the second text area. Please show us how you’ve tried to target the second textarea. Do you know what `document.getElementById('textbox').value` is? If so, then you should know how to get the contents of the other textarea. _“I cannot make another function for the second textarea tag”_ — why? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. Also, note that _not_ appending the anchor to the DOM and executing the `click` method only works in recent browsers. — Sebastian Simon, Mar 05 '22 at 22:46

score 1 · Accepted Answer · answered Mar 05 '22 at 22:55

You were trying to get the value of an element with an ID of 'textbox' but there wasn't such an element. You have 'textbox1' and 'textbox2'. This code will retrieve both and concatenate them with a newline into your blob.

I've fixed up some errors in your HTML (the labels not linking correctly with their inputs), also please use let & const instead of ancient var!

function saveIndex() {
  const boxString1 = document.getElementById('textbox1').value
  const boxString2 = document.getElementById('textbox2').value
  const myBlob = new Blob([`${boxString1}\n${boxString2}`], {
    type: "text/plain"
  });

  const url = window.URL.createObjectURL(myBlob);
  const anchor = document.createElement("a");
  document.body.appendChild(anchor);
  anchor.href = url;
  anchor.download = "textfile.txt";

  anchor.click();
  window.URL.revokeObjectURL(url);
  anchor.remove();
}

<body>
  <label for="textbox1">Textbox1</label>
  <textarea id="textbox1"></textarea>

  <label for="textbox2">Textbox2</label>
  <textarea id="textbox2"></textarea>

  <button type="button" id="bt" onclick="saveIndex()">EXPORT</button>
</body>

How to have Javascript function save two text inputs into one text (.txt) file?

1 Answers1