Saving form submitted data to CSV file using Javascript / JQuery

Question

Trying to submit form data (name and lastname) to a csv file which is stored in the same directory as the html file. Has to be either JavaScript or JQuery because im injecting this into a SquareSpace website which only supports JS.

So far I have been able to serialize the form data into an array which returns

0: {name: "FirstName", value: "John"}
1: {name: "LastName", value: "Doe"}

Spent a couple of hours trying to save this array information into my comments.csv file, to no avail.

Here's the code:

<form id="form">
        Type your first name: <input type="text" name="FirstName" size="20"><br>
        Type your last name: <input type="text" name="LastName" size="20"><br>
        <input type="button" value="submit" id="dl" onclick="clearForm();">
      </form>

    <script>
//Clear form once submitted
function clearForm(){
    document.getElementById("form").reset();
}

$(document).ready(function(){  
    $("button").click(function(){  
        var x = $("form").serializeArray();  
    });                                     
});  

//Submit x array into ./comments.csv file


    </script>

I want to get the firstname and lastname underneath appropriate columns in the csv file. Firstname being 1st column and lastname being 2nd column, in a way that I will be able to display this information in an html table later on.

Vitor Avanço · Accepted Answer · 2019-09-15 00:06:16Z

3

You have to parse your form data into CSV format and trigger a link to download. See implementation below

       <form id="form">
          Type your first name: <input type="text" name="FirstName" size="20"><br>
          Type your last name: <input type="text" name="LastName" size="20"><br>
          <input type="button" value="submit" id="dl" onclick="submitForm()">
        </form>

        <script>
          //Clear form once submitted
          function clearForm(){
              document.getElementById("form").reset();
          }

          function submitForm() {
            var formData = $("form").serializeArray();
            let csv = "data:text/csv;charset=utf-8,"; // accept data as CSV

            formData.forEach(function(item) {
              csv += item.value + ";"; // concat form value on csv var and add ; to create columns (you can change to , if want)
            });

            var encodedUri = encodeURI(csv);

            // if you want to download
            var downloadLink = document.createElement("a");
            downloadLink.setAttribute("download", "FILENAME.csv");
            downloadLink.setAttribute("href", encodedUri);
            document.body.appendChild(downloadLink); // Required for FF
            downloadLink.click();
            downloadLink.remove();

            clearForm();
          }
        </script>

edited Sep 15, 2019 at 0:06

answered Sep 14, 2019 at 23:58

Vitor Avanço

1,1737 silver badges9 bronze badges

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

5 Comments

charlietfl Over a year ago

event is not a global object in all browsers. Will throw error in many of them

Vitor Avanço Over a year ago

ok I removed the line because it was useless, because the form uses type button

Omi in a hellcat Over a year ago

I don't want it to download the csv file though. I already have the csv file created and just want the form content to be inserted into the csv file if that's possible.

Vitor Avanço Over a year ago

If you already have a file is impossible edit him with javascript. You need a implementation with server side language.

Quentin Over a year ago

"csv += item.value + ";"; // concat form value on csv var and add ; to create columns (you can change to , if want)" — This is a really unreliable way of encoding data to CSV that fails to account for any special characters. Use a robust library like Papa Parse instead.

Collectives™ on Stack Overflow

Saving form submitted data to CSV file using Javascript / JQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related