Download form values as csv on click using javascript

Question

I am writing a small app and I need to enter information using dropdown menus to then download the values as a csv file to be manipulated in Python. It's all offline; the only reason why I am using Javascript is because I need to show interactive svg charts and its easier in a browser. My form is something like this:

<form name="myForm">
  <select name="dropdownMenu">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select><br>
</form>

And then I know I can access the selected form value with something like:

<input type="button" value="Click" onclick="alert(document.myForm.dropdownMenu.value)">

Is there any way to trigger a download of that value with something like this?:

<a href="document.myForm.dropdownMenu.value" download="myFile.csv">Download</a>

[This](http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side) is what you need — n0m4d, Jul 21 '16 at 12:09

score 1 · Accepted Answer · answered Jul 21 '16 at 12:38

1

You can use the encodeURI and window.open functions

   var encodedUri = encodeURI(csvjson);
   window.open(encodedUri);
   var encodedUri = encodeURI(csvContent);

answered Jul 21 '16 at 12:38

orangespark

631
6
19

score 0 · Answer 2 · answered Jul 21 '16 at 12:26

this is not a complete answer, but merely a collection of ideas:

Add an id to your link <a id="somethingUnique" href=... so that you can retrieve it later
Create a function that changes the href attribute (var link = document.getElementById("somethingUnique"); link.setAttribute("href", document.myForm.dropdownMenu.value);)
Call this function on the select change event (see here how to)

Then when the link is clicked, the correct hyperlink is used.

Download form values as csv on click using javascript

2 Answers2