Need buttons to download a file and disable used button, how to do so in HTML?

ATTENTION: You are viewing a page formatted for mobile devices; to view the full web page, click HERE.

DonationCoder.com Software > Post New Requests Here

<< < (2/5) > >>

Deozaan:
So you just want to temporarily disable the download button to prevent accidental downloading of the same thing(s) twice, or to help the user keep track of what has already been downloaded, but you're not concerned about preventing someone from intentionally downloading things multiple times?

OptimalDesigns:
Yes! :) You got it, now do you have a script to handle this?

Deozaan:
now do you have a script to handle this?
-OptimalDesigns (July 08, 2023, 05:51 PM)
--- End quote ---

I don't. But I imagine it could be accomplished fairly simply with some JavaScript that disables the button or removes the link when it gets clicked.

I was just trying to clarify what your needs were, since others who responded understandably seemed to think you were trying to allow downloads once and only once per person.

ProCompSys:
Hi,
my five cent to this topic:

First, delete those A-Tags, just keep the BUTTON-Tags.
Then add a VALUE-Attribute to the BUTTON-Tags that keep the URL of the file you want to download.
In the OnClick-attribute, we start a small JavaScript that is nested in the HEAD-section of the HTML-file.
The script does 2 things:
1. it opens a new browser-tab (on older browsers a new window) and directs it to the file to download
2. it sets a new attribute to the button called "disabled". This does exactly what it sounds like... it disables the button ;-)

You can probably replace

--- ---window.open(fileUrl,'_blank');with

--- ---window.open(fileUrl,'');to not open the download in a new tab/window.
But please test with PDF-files, as current browsers tend to open PDFs within the browser... you might end up having to click the back-button to get back to your page. In that case you might have to stick to the "open in new tab" version.

--- ---<html>
<head>
<STYLE TYPE="text/css">
td {
padding:10px;
}
</style>

<script type="text/javascript">
function dwldAndDisableButton(whichOne) {
// read VALUE-attribute to get link to file
fileUrl=document.getElementById(whichOne).value;

// open new tab/window to download the file
window.open(fileUrl,'_blank');

// disable the button that was clicked
document.getElementById(whichOne).setAttribute("disabled", "");
}
</script>

</head>

<body>

<table border="1">
<tr class="topic">
<td>
Descript 1
</td>
<td>

<button id="btn1-1" class="button btn1" value="abc.ppt" onClick="dwldAndDisableButton(this.id);">PPT</button>
</td>
<td>

<button id="btn2-1" class="button btn2" value="abc.pdf" onClick="dwldAndDisableButton(this.id);">PDF</button>
</td>
</tr>
</table>

</body>

</html>

First, we define a function named "dwldAndDisableButton" that does the magic.
In the OnClick-attribute of the button(s) we call this function with a parameter... "this.id"... it tells the function which button was pressed by specifying THIS element of the page (that was clicked = the clicked button) and the individual ID, so that the function knows exactly where to look for the URL that needs to be downloaded.

The function then uses "getElementById" to find the clicked element within the page and reads the content of the VALUE-attribute, that - in our case - contains the needed URL.
It then opens a new tab/window with that URL... resulting in a download.

Finally, the function uses "getElementById" again, to add the attribute DISABLED to the button.

Done.

OptimalDesigns:
It kinda worked. Here is a list of things needing some work on:
1. It opened the file, but no saved download file. Anyway for both?
2. How to change background-color to lightgray for 'this.id' button?
3. Any way to put 'onClick="dwldAndDisableButton(this.id);" ' cmd in <table> cmd? This takes up a lot of room and is redundant. Presently there are 20+ rows of these and more may be coming. Plus, another type of filetype may be added; giving another column of buttons.
4. Any simple way to save filename in <tr> and pass it on to <button> cmd.s as it is redundant too. Will need to merge filename & filetype in <button> cmd.

I'm willing to pay for the help.

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version