使用Javascript/JQuery将表单提交的数据保存到CSV文件

尝试将表单数据名和lastname提交到与html文件存储在同一目录中的csv文件。必须是JavaScript或JQuery，因为我将其注入到一个只支持JS的SquareSpace网站中

到目前为止，我已经能够将表单数据序列化到一个返回

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

花了几个小时试图将此数组信息保存到my comments.csv文件中，但没有成功

代码如下：

<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>

---

我想在csv文件的相应列下面获得firstname和lastname。Firstname是第一列，lastname是第二列，这样以后我就可以在html表中显示这些信息了。

您必须将表单数据解析为CSV格式，并触发下载链接。 见下面的实施

       <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>

---

事件不是所有浏览器中的全局对象。我删除了这一行，因为它没有用，因为表单使用了类型按钮。不过我不想让它下载csv文件。我已经创建了csv文件，如果可能的话，我只想将表单内容插入csv文件。如果你已经有一个文件，就不可能用javascript编辑他。您需要使用服务器端语言实现。