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 is what you need

Eddie
– Eddie

2016-07-21 12:09:22 +00:00
Commented Jul 21, 2016 at 12:09 — Eddie
– Eddie, Commented Jul 21, 2016 at 12:09

orangespark · Accepted Answer · 2016-07-21 12:38:35Z

1

You can use the encodeURI and window.open functions

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

answered Jul 21, 2016 at 12:38

orangespark

6496 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cristian Dinu · Accepted Answer · 2016-07-21 12:26:26Z

0

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.

answered Jul 21, 2016 at 12:26

Cristian Dinu

3,8581 gold badge16 silver badges7 bronze badges

Collectives™ on Stack Overflow

Download form values as csv on click using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related