CODEWITHSUNDEEP
javascriptphphtml
Joulin Nicolas
Joulin Nicolas

Reputation: 257

trying to hide "download" button once clicked

I have a simple form only consisting of a button that is used to download a file. here is the code :

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

Download.php is a small php file with header used to engage download, here it is :

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

What I'm trying to do is hide the button or the form after the user clicked on it. So far I have tried toying with css and javascript listener but nothing worked so far.

When I click on the button it download the file but doesn't hide the button.

How can I hide the button after submiting the form ?

Upvotes: 0

Views: 1556

Answers (4)

Darkisa
Darkisa

Reputation: 2037

The following should work. 

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

I changed the action of the form just to check what was happening, but you can replace that with your action path.

Upvotes: 0

Tobias F.
Tobias F.

Reputation: 1048

You can use Javascript:

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

This will hide your button when it's clicked. Here is a fiddle.

Upvotes: 5

Mark Carpenter Jr
Mark Carpenter Jr

Reputation: 842

You should give your button at the very least a class like so,

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

and you can use vanilla js to select and hide it,

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

or if you're using jQuery

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

Should get you close.

Upvotes: 0

marmeladze
marmeladze

Reputation: 6572

Sth like this?

document.getElementById("downloader").addEventListener('click', function() {
  this.style = "display: none;"
});
<div>
  <button type='submit' id="downloader">Telecharger</button>
</div>

Upvotes: 0

Related Questions