Is it possible to use the submit function to save textareas to a new file?

Question

I am trying to see if it is possible to use a script to write two text areas to a single file when clicking "Submit" on my page? (For total context, these are HTML pages being hosted locally on the machine and are not being housed on a server anywhere)

I successfully learned to erase the two text areas with javascript:eraseText and having that button set the values to "".

I have been looking for an option but I don't know if I'm asking it the right way.

Any help is appreciated.

Edits for clarity

<!DOCTYPE html>
<html>
<head>
<script>

function eraseText() {
    document.getElementById("one").value = "";
    document.getElementById("two").value = "";
}

function submit() {


}

</script>
</head>
<body>

<div id="boxes">

<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>

</div>

<p></p>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<input type="button" value="Submit" onclick="javascript:submit();">

</body>
</html>

So I'd like to click submit and have the values in "one" and "two" parsed to a single HTML output.

When you say "a single file", are you referring to an actual, downloadable, file? — Max, Aug 05 '17 at 19:11
That would be an acceptable option. The end result is something as simple as putting information in the two text areas that has basic HTML formatting and I would like to be able to click "Submit" and have it show the result of the formatted HTML together. - So textAreaOne="This is boldThis is italic." and clicking submit would show it as one page with each line. — adrian, Aug 05 '17 at 19:13
Possible duplicate of [Javascript: Create and save file](https://stackoverflow.com/questions/13405129/javascript-create-and-save-file) — Ali Adlavaran, Aug 05 '17 at 19:20
@AliAdlavaran - thanks for the link! I'm gonna check those out now — adrian, Aug 05 '17 at 19:23
I'm sorry to tell you this but this is extremely basic stuff (i.e. not SO material). You're also asking for how to create/save a new file (which is why somebody marked this as duplicate of a question it turns out yours isn't a duplicate of), then in your comment say you actually want to something completely different, namely display the combined text on the page. Just look into `.innerHTML`. Also, you don't need to add `javascript:` for `onclick` attributes, since the click handling is already done by JS. — , Aug 05 '17 at 19:38
@ChrisG Yeah, the original intent was to have it save to an html file so that I could have a trail of all the different ones I have submitted. So in the clarification I did want to point out that even just displaying it would work too. I'll definitely keep it in mind for future questions as if I had searched for saving the output I would have found the other thread. — adrian, Aug 05 '17 at 19:42

Sam Apostel · Accepted Answer · 2017-08-05T19:43:11.537

2

<!DOCTYPE html>
<html>
<head>
<script>

function eraseText() {
    document.getElementById("one").value = "";
    document.getElementById("two").value = "";
}

function submit() {
    var combined = "";
    combined += document.getElementById("one").value;
    combined += document.getElementById("two").value;
    document.getElementById("destination").innerHTML = combined;
}

</script>
</head>
<body>

<div id="boxes">

<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>

</div>

<p id="destination"></p>
<input type="button" value="Clear" onclick="eraseText();">
<input type="button" value="Submit" onclick="submit();">

</body>
</html>

edited Aug 05 '17 at 19:43

answered Aug 05 '17 at 19:27

Sam Apostel

593
3
18

You should add a closing quote to `document.getElementById("destination).innerHTML = combined;` so that it becomes `document.getElementById("destination").innerHTML = combined;`. Good answer though – Max Aug 05 '17 at 19:27
@Max tnx, didn't see the typo ;p – Sam Apostel Aug 05 '17 at 19:31
@SamApostel Thank you so much! I just tried it and it worked! That is so great :D Thank you so much for the help. I upvoted, but I'm still too new for it to count publicly I guess. – adrian Aug 05 '17 at 19:35
@Max Thanks for your input below and the help on the closing quote. You are equally as awesome :D – adrian Aug 05 '17 at 19:36
@adrian ah yess, keep coding. Keep trying! Don’t forget to look at other people’s work ☺️ – Sam Apostel Aug 05 '17 at 19:36
@SamApostel for sure! I absolutely love GitHub. Using some of the frameworks there has been so useful. I have been watching a tutorial on webscraping using Python and BeautifulSoup also. I tend to jump around a bit, but I love the CLI on the Mac and I have loved learning all I have so far. The helpful people in the community have only made it even more enjoyable – adrian Aug 05 '17 at 19:40

score 0 · Answer 2 · answered Aug 05 '17 at 19:27

The solution that doesn't use any server-side code to accomplish this, if I understand your question correctly, is as follows.

Let's write what your HTML probably currently looks like.

<textarea></textarea>
<textarea></textarea>
<button type="submit">Submit</button>

Let's first add an output area where the preview will appear. This could be a <div></div> element.

Now, add id attributes to all the elements (I'll use the IDs "a", "b", "c", and "d", and the output DIV. This allows JavaScript code to easily grab a certain element using the Document Object Model.

Once done, this is the code

document.getElementById("d").addEventListener("click", function(){ // do this when element with id `d` is clicked
    document.getElementById("c").innerHTML = // set the output element's inner HTML to...
                                            document.getElementById("a").value + document.getElementById("b").value 
})

<textarea id="a"></textarea>
<textarea id="b"></textarea>
<div id="c"></div>
<button id="d">Submit</button>

document.getElementById(IDGOESHERE) returns a JavaScript object representing the element with that ID. .addEventListener binds something to an event happening (in this case, the click event triggers a function to be called).

That function takes the values of the two textareas, and adds (joins) them together using the + operator, which concatenates with strings.

It then assigns this HTML using the .innerHTML property of the output element.

I'm not sure if this is what you wanted, so please do clarify if it isn't.

I think you shouldn't go into eventListeners here... good explanation though — Sam Apostel, Aug 05 '17 at 19:33
Mmhm, I'm pretty sure using `javascript:STUFF` isn't considered good code anymore, though — Max, Aug 05 '17 at 19:39
you’re correct! I updated my answer to comply with the latest standards (I think). If you find anything else, I’ll gladly change it ☺️ — Sam Apostel, Aug 05 '17 at 19:44
Yeah, the code now is good! I didn't want to use onclick in case they wanted to bind more than one listener later in development (i.e. using good practices early on), but onclick works fine. Yay - collaboration works!! — Max, Aug 05 '17 at 20:08

Is it possible to use the submit function to save textareas to a new file?

2 Answers2