title: jQuery - Downloading Textarea Contents
body: <p>How can I download the textarea value/contents when I click a button? It should act like PHP:</p>
  
  <pre><code>&lt;?php
  $file = 'proxies.txt';
  
  if (file_exists($file)) {
      header('Content-Description: File Transfer');
      header('Content-Type: application/octet-stream');
      header('Content-Disposition: attachment; filename="'.basename($file).'"');
      header('Expires: 0');
      header('Cache-Control: must-revalidate');
      header('Pragma: public');
      header('Content-Length: ' . filesize($file));
      readfile($file);
      exit;
  }
  ?&gt;
  </code></pre>
  
  <p>I just can't find any way on here to do it. I don't want it to make a href to click a second time to download. I just want to click a button and it will download a txt file containing the textarea's contents.</p>
  
  <p>My current code that wont work:</p>
  
  <pre><code>$('#test').click(function() {
      contentType =  'data:application/octet-stream,';
      uriContent = contentType + encodeURIComponent($('#proxiescontainer').val());
      $(this).setAttribute('href', uriContent);
  });
  </code></pre>
  
  <p>Explanation:</p>
  
  <ul>
  <li><code>#test</code> is the <code>a</code> tag wrapping the button;</li>
  <li><code>#proxiescontainer</code> is the <code>textarea</code> itself;</li>
  </ul>
  
  <p>So how can I get it to be a onClick download of the textarea's contents?</p>
  
  <p>My AJAX:</p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "grab.php", true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
  
      if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
  
          var t = $('#proxiescontainer').scrollTop(), $d2 = $('#proxiescontainer').replaceWith('&lt;button type="button" id="download" class="form-control button"&gt;Download&lt;/button&gt;&lt;textarea id="proxiescontainer" class="form-control message-input" style="height: 250px!important;"&gt;' + xhttp.responseText + '&lt;/textarea&gt;');
  
          if (t){ $('#proxiescontainer').scrollTop(t + $d2.outerHeight()); }
  
      }
  
  }
  </code></pre>