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!
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>