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

Posted 2023-02-22

【中文标题】用两个提交按钮区分 HTML 表单上的提交按钮 [重复]

【英文标题】：Distinguish among submit buttons on HTML form with two submit buttons [duplicate]

【发布时间】：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

的可能重复项

【参考方案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。