用两个提交按钮区分 HTML 表单上的提交按钮 [重复]答案

【问题标题】：Distinguish among submit buttons on HTML form with two submit buttons [duplicate]用两个提交按钮区分 HTML 表单上的提交按钮 [重复]
【发布时间】：2015-09-20 20:42:41
【问题描述】：

我正在使用表单将信息发送到 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
?>

我想知道如何将这两个功能结合起来，因为当我单击任一按钮时，总是会打开预览 - 我无法让下载工作...

【问题讨论】：

Two submit buttons in one form 的可能重复项

标签： javascript php jquery submit preview

【解决方案1】：

您需要发送一个附加参数 action 并检查您的 PHP 处理程序文件（在 <form action= 中引用的那个）以获得 2 个不同的值（例如“下载”和“预览”）。

给定以下 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
} ?>

【讨论】：

【解决方案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。

【讨论】：