在具有两个提交按钮的HTML表单中区分提交按钮

Question

我正在使用表单将信息发送到一个PHP页面（使用“GET”）。

我希望在表单下面有两个按钮：一个用于预览生成的页面，另一个用于下载生成的页面。

我找到了这个预览部分的解决方案：

<script type="text/javascript">
    $("form").submit(function() {
        $("form").attr('target', '_blank');
        return true;
    });
</script>

这个功能非常好用。

为了让生成的页面可以下载，我通常使用普通的提交按钮：

<input type="submit"
       name="submit"
       id="submit"
       onClick="myFunction()"
       value="Download Bonus Page" >

在生成的PHP页面中，我在顶部添加了以下内容：

<?php
    $filename = 'bonuspage.html';
    header('Content-disposition: attachment; filename=' . $filename);
    header('Content-type: text/html');
    // ... the rest of your file
?>

我想知道如何同时结合这两个功能，因为当我单击两个按钮中的任何一个时，总是会打开预览 - 我无法使下载功能正常工作...

- Mike Janssens

---

可能是*一个表单中的两个提交按钮*的重复问题。 - Peter Mortensen

Answer 1

您需要发送额外的参数action，并在您的PHP处理文件（在<form action=中引用的文件）中检查2个不同的值（例如'download'和'preview'）。

给定以下HTML：

<form method="GET" action="your/handler.php" id="myform">
    <input type="hidden" name="action" id="action" value="preview" />
    <input type="button" value="preview" id="preview"/>
    <input type="button" value="download" id="download"/>
</form>

您可以轻松创建一个切换功能并手动提交表单。

function toggleAction(e) { 
   var target = $(e.target);
   $('#action').val(target.attr('value'));
   $('#myform').submit();
}
$('#preview').on('click', toggleAction);
$('#download').on('click', toggleAction);

或者，如果你想避免需要重新加载页面（使用这种方法，不需要额外的隐藏字段）：

function toggleAction(e) { 
   var target = $(e.target);
   $.ajax({ url: 'your/handler.php', data: { action: target.attr('value') })
    .done(function(data) {
       // process returned data (from echo statement in handler)
    });       
}

在你的PHP文件中：

<?php if($_GET['action'] === 'preview') {
    // preview code
} else {
    // download code
} ?>

- webketje

Answer 2

放置两个按钮，如下所示：

<script type="text/javascript">
    function myFunction(el) {
        $(el).parents('form').first().attr('target','_blank').find('input[name="what"]').val('download');
    }
</script>

<form method="GET">
    <input type="hidden" name="what" value="preview" />
    <input type="submit" value="Preview" />
    <input type="button" value="Download" onclick="myFunction(this)" />
</form>

这样，您将获得一个名为what的附加变量，指示按下了哪个按钮。

在您的PHP文件中，只需执行以下操作：

<?php
$filename = '/complete/path/of/the/file.html';
if($_GET['what'] === 'preview') {
    //
} else {
    header('Content-disposition: attachment; filename=' . basename($filename));
    header('Content-type: text/html');
}

echo file_get_contents($filename);

?>

还有另一种方法，使用两个具有不同名称和值的提交按钮，您可以在PHP脚本中测试它，但仍需要使用JavaScript来实现target="_blank"以进行下载。

更好的方法是使用HTML5 <a download>语法。请查看this link。

- Alex