Javascript 用两个提交按钮区分HTML表单上的提交按钮

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

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

我为预览部分找到了以下解决方案：

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

$（“表格”）。提交（函数（）{
$（“form”）.attr（'target'，'u blank'）；
返回true；
});

这很有效

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

<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
?>

---

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

请按如下两个按钮：

<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>

还有另一种方法，有两个具有名称和不同值的submit按钮，您可以在PHP脚本中进行测试，但您仍然需要使用Javascript进行

target=“\u blank”

下载

---

更好的方法是使用HTML5

您需要发送一个额外的参数
action
并检入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);

?>

<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 if($_GET['action'] === 'preview') {
    // preview code
} else {
    // download code
} ?>