👩‍🎤 🤢 ⌨️ How to open and save html text to a file using javascript in HTML

<body>
  
  <header class="page-header js-page-header">
    <a class="page-header-logo-container" href="https://geek-answers.imtqy.com/index.html"></a>
    <div class="page-header-text">Geek Answers Handbook</div>
  </header>
  <section class="page js-page">
<div itemscope="" itemtype="http://schema.org/QAPage" class="page">

<div class="main-col" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question">
<div class="question-header">
<h1 itemprop="name"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">How to open and save text in html to file using javascript in HTML</font></font></h1>
</div>
<div class="question">
<div class="question-row">
<div class="question-text">
<div class="description" itemprop="text">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">I have a text box and two buttons</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">like</font></font></p>
<pre class="prettyprint-override"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"form1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text1"</span>></span> HTML Codes goes here <span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span> Open File
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span> Save File
<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
</code></pre>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> when I click the Save button, I want the text in the text box to be saved (I want it to pop up in the Save As dialog box)</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">When I click "open", it should let me select any html or text file ... and load the text into a text file / htmlcode in my text area.</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Found this code at </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">http://www.dynamicdrive.com/forums/archive/index.php/t-10532.html</font></font></a></p>
<pre class="prettyprint-override"><code class="hljs xml">  <span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">language</span>=<span class="hljs-string">"javascript"</span>></span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">WriteToFile</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-keyword">var</span> fso = <span class="hljs-keyword">new</span> ActiveXObject(<span class="hljs-string">"Scripting.FileSystemObject"</span>);
<span class="hljs-keyword">var</span> s = fso.CreateTextFile(<span class="hljs-string">"C:\\NewFile.txt"</span>, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">var</span> text=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"TextArea1"</span>).innerText;
s.WriteLine(text);
s.WriteLine(<span class="hljs-string">'***********************'</span>);
s.Close();
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><font></font>
<font></font>
<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"abc"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text"</span>></span>FIFA<span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"WriteToFile()"</span>></span>Click to save<span class="hljs-tag"></<span class="hljs-name">Button</span>></span>  
<span class="hljs-tag"></<span class="hljs-name">form</span>></span> <font></font>
<font></font>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> this will work if the user allows the user to save the file ... and I forgot to say that all the files are on the client computer.</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Thanx in advance</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-Miss Subanki</font></font></p> </div>
<div class="favorite hidden"><i class="far fa-star"></i></div>
<div class="votes-question">
<i class="glyphicon glyphicon-arrow-ups"></i>
<div class="vote-count greenc" itemprop="upvoteCount"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
+5 </font></font></div>
<i class="glyphicon glyphicon-arrow-down"></i>
</div>
<div class="tags">
<a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'javascript'" rel="tag"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">javascript </font></font></a>
<a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'html'" rel="tag"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">html</font></font></a>
</div>
<div class="clearfix"></div>
<div class="action-time">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">subanki</font></font></a></span></span> <time title="2010-07-11 17:05" itemprop="dateCreated" datetime="2010-07-11T17:05:30+0000"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Jul 11 </font><font style="vertical-align: inherit;">'10 at 17:05</font></font></time>
</div>
<a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener"></a>
<a class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share"></a>
<div class="clearfix"></div>
</div>
</div>
</div>
<ins style="height: 90px;display: block;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="2" data-overlay="false">

</ins>
<div class="answers " id="answers_hash">
<div class="answers-header">
<span class="pull-left"><span itemprop="answerCount">3</span> </span>
<div class="clearfix"></div>
</div>
<div class="answer-pager hidden">
</div>
<div class="answer accepted" id="3563852_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer">
<div class="answer-row">
<div class="answer-text">
<div class="desc" itemprop="text">
<p>      Javascript,     execcommand,      Internet Explorer.</p>
<pre class="prettyprint-override"><code class="hljs coffeescript"><span class="hljs-built_in">document</span>.execCommand(<span class="hljs-string">'SaveAs'</span>, <span class="hljs-literal">true</span>);
</code></pre> </div>
<div class="votes-answer">
<i class="glyphicon glyphicon-arrow-ups"></i>
<div class="vote-count greenc" itemprop="upvoteCount">
 +1 </div>
<i class="glyphicon glyphicon-arrow-down"></i>
</div>
<div class="clearfix"></div>
<div class="action-time">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">JC Leyba</a></span></span> <time title="2010-07-11 17:29" itemprop="dateCreated" datetime="2010-07-11T17:29:45+0000"> 11 . '10  17:29</time>
</div>
<a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener"></a>
<a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share"></a>
<div class="clearfix"></div>
</div>
</div>
</div>
<ins style="height: 90px;display: block;margin-top: 15px;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="3" data-overlay="false">

</ins>
<div class="answer rltd" id="3563851_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer">
<div class="answer-row">
<div class="answer-text">
<div class="desc" itemprop="text">
<p> -       ,    ;  PHP     HTTP-   :</p>
<pre class="prettyprint-override"><code class="hljs php"><span class="hljs-comment">// set the content type</span>
header(<span class="hljs-string">'Content-type: text/plain'</span>);
<span class="hljs-comment">// force save as dialog (and suggest filename)</span>
header(<span class="hljs-string">'Content-Disposition: attachment; filename="download.txt"'</span>);
<span class="hljs-comment">// next echo the text</span>
<span class="hljs-keyword">echo</span> $_POST[<span class="hljs-string">'text'</span>];
</code></pre>
<p>.       ,      -  (  "" ) API,   firefox.</p> </div>
<div class="votes-answer">
<i class="glyphicon glyphicon-arrow-ups"></i>
<div class="vote-count greenc" itemprop="upvoteCount">
+3 </div>
<i class="glyphicon glyphicon-arrow-down"></i>
</div>
<div class="clearfix"></div>
<div class="action-time">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Christian</a></span></span> <time title="2010-07-11 17:14" itemprop="dateCreated" datetime="2010-07-11T17:14:09+0000"> 11 . '10  17:14</time>
</div>
<a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener"></a>
<a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share"></a>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="answer last bt" id="3563853_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer">
<div class="answer-row">
<div class="answer-text">
<div class="desc" itemprop="text">
<p>    <strong> IE</strong>,   <code>ActiveXObject</code>     (/).      </p>
<p>   ,       </p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">But remember that it only works in IE</font></font></p> </div>
<div class="votes-answer">
<i class="glyphicon glyphicon-arrow-ups"></i>
<div class="vote-count redc" itemprop="upvoteCount"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
-1 </font></font></div>
<i class="glyphicon glyphicon-arrow-down"></i>
</div>
<div class="clearfix"></div>
<div class="action-time">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">user372551</font></font></span></span> <time title="2010-07-13 11:00" itemprop="dateCreated" datetime="2010-07-13T11:00:57+0000"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Jul 13 </font><font style="vertical-align: inherit;">'10 at 11:00</font></font></time>
</div>
<a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">source </font></font></a>
<a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">share</font></font></a>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="answer-pager hidden">
</div>
</div>

</div>
</div>

<section class="more-articles-navigation-panel js-more-articles-navigation-panel">
<h4>More articles:</h4>
<nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages">
<li><a href="../1049611/index.html">How to automatically trigger an event when a function is called? - c #</a></li>
<li><a href="../1049612/index.html">How to create an OpenID login form - php</a></li>
<li><a href="../1049613/index.html">https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=https://fooobar.com/questions/1049613/ways-to-improve-efficiency-of-c-code&usg=ALkJrhimxkxd5_oM8VqvheqvlDf2HlmviA</a></li>
<li><a href="../1049614/index.html">Data List Structure C # Efficiency - generics</a></li>
<li><a href="../1049615/index.html">How to hide the view when animating in android? - android</a></li>
<li><a href="../1049617/index.html">Git workflow for custom css files and themes - git</a></li>
<li><a href="../1049618/index.html">How to test a COM dependent object in C # - c #</a></li>
<li><a href="../1049619/index.html">Creating a submodule in a git project - git</a></li>
<li><a href="../1049620/index.html">how to wait with setTimeout until the variable loads and at the same time receives HTTP requests! - javascript</a></li>
<li><a href="../1049621/index.html">Значок Android для "open" или "load" - android</a></li>
</ul></nav>
</section><br />
<a href="../../allArticles.html"><strong>All Articles</strong></a>
<script src="../../js/main.js"></script>

<script type="text/javascript" >
  (function (d, w, c) {
      (w[c] = w[c] || []).push(function() {
          try {
              w.yaCounter62683636 = new Ya.Metrika({
                  id:62683636,
                  clickmap:true,
                  trackLinks:true,
                  accurateTrackBounce:true,
                  webvisor:true
              });
          } catch(e) { }
      });

var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script"),
          f = function () { n.parentNode.insertBefore(s, n); };
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
          d.addEventListener("DOMContentLoaded", f, false);
      } else { f(); }
  })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/62683636" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-166339405-1', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</section>

<footer class="page-footer">
  <div class="page-footer-legal-info-container page-footer-element">
    <p>
      Geek Answers | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span>
    </p>
  </div>
  <div class="page-footer-counters-container page-footer-element">
    <a class="page-footer-counter-clustrmap" href='#'  title='Visit tracker'><img src='https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=IDRwb302jFsed82JlnSkxjeQ3C5_AObCmGX74jggris&co=3a3a3a&ct=ffffff'/></a>
  </div>
</footer>
  
</body>

</html>