Question

我有一个简单的表单，只包含一个用于下载文件的按钮。这是代码：

<form method='post' action='download.php?file=file.txt' name='form1'>
<button type='submit'>Telecharger</button>
</form>

Download.php是一个小的php文件，带有用于下载的标题，这里是：

<?php
    $filename=$_GET['file'];
    header('Content-Type: text/plain'); 
    header("Content-disposition: attachment;filename=$filename");
    readfile($filename);
?>

我尝试做的是在用户点击按钮或表单后隐藏它。到目前为止，我已经尝试使用css和javascript监听器，但到目前为止没有任何工作。

当我点击按钮时，它会下载文件，但不会隐藏按钮。

提交表单后如何隐藏按钮？

Answer 1

您可以使用Javascript：

<form method='post' action='download.php?file=file.txt' name='form1'>
  <button onClick='this.style.display = "none";' type='submit'>Telecharger</button>
</form>

这会在点击时隐藏您的按钮。 Here是一个小提琴。

Answer 2

这是吗？

＆＃13;

document.getElementById("downloader").addEventListener('click', function() {
  this.style = "display: none;"
});

＆＃13;

<div>
  <button type='submit' id="downloader">Telecharger</button>
</div>

＆＃13;

Answer 3

你应该至少给你一个类按钮，

page master 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
        <link rel="stylesheet" href="css/main.css"/>
         <link rel="stylesheet" href="css/normalize.css"/>
        <link href="fonts/fonts.css" rel="stylesheet"/>  
        <link rel="stylesheet" href="css/animate.css"/>

        <script src="js/wow.min.js" type="text/javascript"></script>
        <script type="text/javascript"> new wow().Init(); </script>

你可以使用vanilla js来选择和隐藏它，

<button class="button-toggle" type='submit'>Telecharger</button>

或者如果你正在使用jQuery

document.getElementByClassName("test").addEventListener("click", function( event ) {
    event.target.style.visibility = "hidden";
  }, false);

应该让你亲近。

Answer 4

您应该更改下载方法。 Php submit重新加载页面，这就是为什么你使用的方法都不起作用的原因。试试这个我尚未测试过。但它应该有用。

<script>
$('.download_button').click(function() {
    $(this).hide();
});
</script>
<a href="path_to_your_file" class="download_button" download>

Answer 5

以下内容应该有效。

<form method='post' action="javascript:alert('Hello there, I am being submitted');" name='form1' id="form">
    <button type='submit' id="hide">Telecharger</button>
</form>

<script type="text/javascript">

var button = document.getElementById("hide");

button.addEventListener("click", function(event){   
    button.style.display = "none";
});

</script>

我更改了表单的操作只是为了检查发生了什么，但您可以将其替换为您的操作路径。

试图隐藏＆＃34;下载＆＃34;按钮一旦点击

5 个答案: