javascript - 使用两个提交按钮区分 HTML 表单上的提交按钮

标签 javascript php jquery submit preview

<分区>

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

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

最佳答案

您需要发送一个额外的参数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
} ?>

关于javascript - 使用两个提交按钮区分 HTML 表单上的提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31199481/

相关文章:

c# - gridview 行中的 jQuery 确认对话框始终回发

javascript - 为什么我无法访问设置?

php - 根据特定的数据库信息创建一个 Action

php - 在短代码中插入变量值

javascript - jquery ajax : dynamic success function

javascript - 如何使用 Javascript $.get 调用 Controller 操作 - Yii?

javascript - $.extend() = 与服务器循环一起使用时不扩展

javascript - 自定义浏览按钮

javascript - 如何使这个 jQuery 不计算列表中的子列表?

jquery - 具有边框半径的 div 让文本不超出圆的方法