title: How to persist text after a form submit (how to not delete itself after submit?)
body: <p>How do I save and repopulate text in a text box? Each time I click save, the old text is removed from the text input box, it should not be removed.</p>
  
  <p>I want to make an online editor and I need to be able to save the current text without removing the text from the textarea box after saving it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var types = [
        {"extension": ".html", "name": "HTML"},
        {"extension": ".txt", "name": "Plain Text"},
        {"extension": ".js", "name": "Javascript"},
        {"extension": ".css", "name": "CSS"},
      ];
  types.forEach(function(type) {
    $opt = $("&lt;option&gt;").attr("value", type.extension).text(type.name)
    $("#saveas").append($opt)
  });
  
  function SaveAsType() {
    console.log($("#saveas").val());
  
    {
      var textToSave = document.getElementById("inputTextToSave").value;
      var textToSaveAsBlob = new Blob([textToSave], {
        type: "text/plain"
      });
      var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
      var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value + "" + $("#saveas").val();
  
      var downloadLink = document.createElement("a");
      downloadLink.download = fileNameToSaveAs;
      downloadLink.innerHTML = "Download File";
      downloadLink.href = textToSaveAsURL;
      downloadLink.onclick = destroyClickedElement;
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
  
      downloadLink.click();
    }
  
  }
  
  function destroyClickedElement(event) {
    document.body.removeChild(event.target);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;textarea id="inputTextToSave" name="inputTextToSave" rows="10" cols="70" placeholder="Type your text here:"&gt;&lt;/textarea&gt;
      &lt;br&gt;
      &lt;textarea id="inputFileNameToSaveAs" rows="1" cols="70" placeholder=" Filename Save As " style="resize:none;"&gt;&lt;/textarea&gt;
      &lt;br&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      Save as
      &lt;select id="saveas"&gt;
        &lt;option value=""&gt;Defoult ´´ TXT ´´ file or type your own file type&lt;/option&gt;
        &lt;option value=".html"&gt;´´ HTML ´´ file&lt;/option&gt;
        &lt;option value=".js"&gt;´´ JS ´´ file&lt;/option&gt;
        &lt;option value=".css"&gt;´´ CSS ´´ file&lt;/option&gt;
        &lt;option value=".txt"&gt;´´ TXT ´´ file&lt;/option&gt;
      &lt;/select&gt;&lt;button onclick="SaveAsType();"&gt;Save&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>