如何将html表单导出为csv文件 [英] How to export html form to csv file
问题描述
我试图创建一个用户可以输入数据的表单，然后当他们单击提交时，数据将作为新行添加到存储在服务器上的csv文件中，然后我可以下载。我已经尝试了一些PHP的东西和JavaScript，这两者似乎都很好，但我也不是很有经验。
以下是基本的html表单：
<表单名称= xyz_form >
< section class =border-bottom>
< div class =content>
< h3> ID号码< / h3>
< div class =form-control-group>
< div class =form-control form-control-number>
< input type =numberid =id_number>
< / div>
< / div>
< h3>名字< / h3>
< div class =form-control-group>
< div class =form-control form-control-text>
< input type =textid =first_name>
< / div>
< / div>
< / div><！ - 。content - >
< section class =data-capture-buttons one-buttons>
< div class =content>
< input type =submitvalue =SubmitonClick =javascript：addToCSVFile（）>
< / div>
< / section><！ - 。data-capture-buttons - >
Javascript位于html文件的头部，它是：
< script type =text / javascript>
函数addToCSVFile（）{
var csvData = new Array（）; //收集名称
var csvFilePath =Data.csv; //文件名
//收集一般信息
csvData [0] = document.getElementById（'id_number'）。value;
csvData [1] = document.getElementById（'first_name'）。value;
var fso = new ActiveXObject（'Scripting.FileSystemObject'）;
var oStream = fso.OpenTextFile（csvFilePath，8，true，0）;
oStream.WriteLine（csvData.join（'，'））;
oStream.Close（）;
clearData（）;
alert（数据添加成功）;
}
函数clearData（）{
document.getElementById（'id_number'）。value =;
document.getElementById（'first_name'）。value =;
}
< / script>
现在我有 onClick =javascript：addToCSVFile（） > ，但当我将表单动作设置为handler.php文件并且方法发布并删除onlick时，它也不起作用。这是PHP文件。
<？
if（isset（$ _ POST ['match_scouting']））{
$ del =\t;
//收集信息
$ data [1] = $ _POST ['id_number'];
$ data [2] = $ _POST ['first_name'];
$ file = fopen（Data.csv，a）;
$ data =\r\\\
.implode（$ del，$ data）;
fwrite（$ file，$ data）;
fclose（$ file）;
回显数据已成功添加;
} else {
header（location：form.html）;
}
？>
如果我做错了，你能指出我的方向吗？然而，我最终试图做的是以某种方式保存表单数据，并且我认为这会比建立SQL数据库更容易，因为我从来没有这样做过。
为此，您不需要应用任何JavaScript代码。只需在表单中添加一个动作即可。
< form name =xyz_formaction =proces.phpmethod =get >
submit现在会将您重定向到该php文件。这个php文件应该包含这个：
<？php
$ keys = array（'id_number'，'first_name ）;
$ csv_line = array（）;
foreach（$ key为$ key）{
array_push（$ csv_line，''。$ _GET [$ key]）;
}
$ fname ='file_to_write_to.csv';
$ csv_line = implode（'，'，$ csv_line）;
if（！file_exists（$ fname））{$ csv_line =\r\\\
。 $ csv_line;}
$ fcon = fopen（$ fname，'a'）;
$ fcontent = $ csv_line;
fwrite（$ fcon，$ csv_line）;
fclose（$ fcon）;
？>
$ Keys 是所有输入字段，你可以添加尽可能多的，你想。 $ fname 是要写入的文件的名称。提交表单时，csv文件会添加新行。
你可以照顾这个：编写一个文本文件并强制使用php下载。如果你想强制下载文件。你也可以看看这个重定向而不是下载：如何重定向在PHP中？。您还可以添加：
echo file_get_contents（$ fname）;
到您的 PHP
I am trying to create a form that a user can enter data into and then when they click submit, that data will be added as a new row to a csv file stored on the server which I can then download. I have tried both some php stuff and javascript, both of which seem to be good, but I am not very experienced in either.
Here is basicaly the html form:
<form name="xyz_form">
<section class="border-bottom">
<div class="content">
<h3>ID Number</h3>
<div class="form-control-group">
<div class="form-control form-control-number">
<input type="number" id="id_number">
</div>
</div>
<h3>First Name</h3>
<div class="form-control-group">
<div class="form-control form-control-text">
<input type="text" id="first_name">
</div>
</div>
</div><!--.content-->
<section class="data-capture-buttons one-buttons">
<div class="content">
<input type="submit" value="Submit" onClick="javascript:addToCSVFile()">
</div>
</section><!--.data-capture-buttons-->
The Javascript is in the header of the html file and it is:
<script type="text/javascript">
function addToCSVFile() {
var csvData = new Array(); // To collect the names
var csvFilePath = "Data.csv"; // File name
// Collect General Information
csvData[0] = document.getElementById('id_number').value;
csvData[1] = document.getElementById('first_name').value;
var fso = new ActiveXObject('Scripting.FileSystemObject');
var oStream = fso.OpenTextFile(csvFilePath, 8, true, 0);
oStream.WriteLine(csvData.join(','));
oStream.Close();
clearData();
alert("Data Added Successfully");
}
function clearData() {
document.getElementById('id_number').value = "";
document.getElementById('first_name').value = "";
}
</script>
And right now I have the onClick="javascript:addToCSVFile()"> but it also doesn't work when I set the form action to the handler.php file and the mothod to post and remove the onlick. This is the php file.
<?
if(isset($_POST['match_scouting'])){
$del = "\t";
//Collect Info
$data[1] = $_POST['id_number'];
$data[2] = $_POST['first_name'];
$file = fopen("Data.csv", "a");
$data = "\r\n".implode($del, $data);
fwrite($file, $data);
fclose($file);
echo "The data has been added successfully";
}else{
header("location: form.html");
}
?>
If I am doing this wrong, could you point me in a different direction? What I am ultimately trying to do however is save the form data somehow and I thought this would be easier then setting up an SQL Database since I have never done that before.
For this you do not need to apply any javascript code. Just add an action to your form
<form name="xyz_form" action="proces.php" method="get">
submit will now redirect you to that php file. that php file should contain this:
<?php
$keys = array('id_number','first_name');
$csv_line = array();
foreach($keys as $key){
array_push($csv_line,'' . $_GET[$key]);
}
$fname = 'file_to_write_to.csv';
$csv_line = implode(',',$csv_line);
if(!file_exists($fname)){$csv_line = "\r\n" . $csv_line;}
$fcon = fopen($fname,'a');
$fcontent = $csv_line;
fwrite($fcon,$csv_line);
fclose($fcon);
?>
$Keys is all the names of the input fields you have, and you can add as many as you'd like. $fname is the name of the file you want to write to. The csv file gets added new lines when the form is submitted.
You could look after this: Write a text file and force to download with php. If you want to force download the file. You can also look into this for a redirect instead of download: How to make a redirect in PHP?. You could also add:
echo file_get_contents($fname);
to your PHP
这篇关于如何将html表单导出为csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
