如何使 HTML 表单打印两个文件

Question

我使用以下 HTML 块来表示一个（隐藏的）表单，其中包含我想要处理并在激活时打印到文件的感兴趣的数据：

<form id="output_form" action="exportData.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data" name="output_data" style="">
  <input type="text" id="output_form_filename" name="output_filename" style="">
</form>

当我提交此表单时，数据被发送到exportData.pl，然后将output_data 数据打印到变量output_filename 中的指定文件名。

非常粗略：

#!/usr/bin/perl

use strict;
use warnings;
use CGI;

my $val = param('output_data');
my $fn = param('output_filename');

print "Content-Type: text/plain\n";
print "Content-Disposition: attachment; filename=$fn\n";
print "Content-Description: File to download\n\n";

print "$val\r\n";

我想做的是在提交此表单时导出两个文件，而不仅仅是一个。第二个文件将使用不同的脚本进行处理，以便更改输出。

到目前为止我所尝试的：

我设置了两个隐藏表单：

<form id="output_form_1" action="exportData_1.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data_1" name="output_data" style="">
  <input type="text" id="output_form_filename_1" name="output_filename" style="">
</form>
<form id="output_form_2" action="exportData_2.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data_2" name="output_data" style="">
  <input type="text" id="output_form_filename_2" name="output_filename" style="">
</form>

当我单击一个按钮时，我使用 jQuery 来触发一个 JavaScript 函数 ExportData()，它在两种表单上都运行 submit()：

function ExportData()
{
    var rawTxt = document.getElementById("results_map").innerHTML;

    var fn_1 = exportFilename(".1.tsv");
    $('#output_form_data_1').val(rawTxt);
    $('#output_form_filename_1').val(fn_1);
    $('#output_form_1').submit();

    var fn_2 = exportFilename(".2.tsv");
    $('#output_form_data_2').val(rawTxt);
    $('#output_form_filename_2').val(fn_2);
    $('#output_form_2').submit();
};

但是，submit() 仅在 output_form_1 形式上调用。第二种形式 output_form_2 没有任何反应。

如何提交两个隐藏的表单来打印两个不同的文件？如果做不到这一点，我将如何通过其他方式做到这一点？ （请注意，如果我使用客户端技巧，我不能使用 Flash 或 Java，我需要能够支持 IE 用户。）

Answer 1

使用 AJAX 提交表单。在您的情况下发生的情况是，当第一个表单即将提交到 exportData_1.pl 的 POST 请求时开始并且当前页面上的代码执行停止。

通过使用 AJAX 技术，将发出 2 个单独的 POST 请求，而无需离开您的页面。

This solution 解释了它是如何实现的。

UPD：抱歉，只是专注于问题，而忽略了您希望在每次提交表单时下载文件这一事实。使用 javascript 是不可能的（并非在所有浏览器中）。

在旧 IE 浏览器中也可以使用的替代方法是使用 2 个 iframe，每个 iframe 都包含您的一个表单：

<iframe src="firstFormPage.html"></iframe>
<iframe src="secondFormPage.html"></iframe>

demo

这种方法可以让您在 iframe 内提交表单，而不会导致主页重新加载。

UPD2：修改 iframe 中的表单字段：

<iframe id="form1" src="form1.html" frameborder="0"></iframe>
<iframe id="form2" src="form2.html" frameborder="0"></iframe><br/>
<input id="editForms" type="button" value="Edit Forms"/>

<script>
    $('#editForms').click(function(){
        $('#form1').contents().find('#input').val("Modifed in frame 1");
        $('#form2').contents().find('#input').val("Modifed in frame 2");
    });
</script>

demo