一度クリックした「ダウンロード」ボタンを隠そうとしています

Question

私はファイルをダウンロードするためのボタンからなる単純なフォームしか持っていません。ここでのコードは次のとおりです。Download.phpダウンロードを係合させるために使用されるヘッダを持つ小型のPHPファイルです

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

、ここにある：

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

Sthのようなものですか？

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

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

Answer 3

あなたは非常に少なくとも、そのようなクラスをあなたのボタンを与える必要があり、

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

、あなたが選択し、それを隠すためにバニラのJSを使用することができ、

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

、またはjQueryを使用している場合

$('.button-toggle').click(function() { 
    $(this).hide(); 
}); 

あなたを近くにしてください。

Answer 4

ダウンロード方法を変更する必要があります。 PHPのサブミットはページを再読み込みするので、どちらのメソッドを使用しても機能しません。私はまだそれをテストしていないこれを試してください。しかし、それは動作するはずです。

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

私はちょうど何が起こっているかをチェックするために、フォームのアクションを変更していますが、アクションのパスでそれを置き換えることができます。