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

<< < (3/5) > >>

ProCompSys:
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?
-OptimalDesigns (July 11, 2023, 09:31 AM)
--- End quote ---
What (kind of) file?
As mentioned before, it depends on the browser how to handle the file... PDFs might be opened right away within the browser as "PDF preview". If all else fails, try a zipped version of the file to download. In my case a "Save as..." dialogue-window was opened by the browser in the first place.

2. How to change background-color to lightgray for 'this.id' button?
-OptimalDesigns (July 11, 2023, 09:31 AM)
--- End quote ---
The button design ist determined by the browser, if no special format is defined.
But you can change the appearance using CSS-code.
Though in my case, the button WAS changed to light grey (see screenshot).

Dealing with CSS (cascading style-sheets) is not really complicated, but if you're completely new to that matter it might need some work on the basics to it.
See updated source-code below.
I put some CSS-code for the buttons in the HEAD-section,
referencing the BUTTON-class via the .button-section (mind the dot at the beginning!) as such (i.e. for all buttons),
and another class called .btn1 that only applies to the first button, as the second one has the class "btn2" (all taken from your original template).
If you're not familiar with CSS - at least with the basics - this might not be the best time to go for it, if you need fast results with your button-page... you might get lost in the middle of nowhere. ;-)

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

.button {
padding: 6px 16px;
border: 1px solid green;
border-radius: 0 8px 8px;
box-shadow: 0 lpx 5px gray;
color: white;
text-shadow: 0 -1px 1px #333;
font-size: 20px;
line-height: 30px;
}

.btn1 {
background: #5a9900 linear-gradient(#8db243, #5a9900);
}

.btn1:disabled {
background: #808080 linear-gradient(#C0C0C0, #808080);
}

.btn2 {
background: #5a3300 linear-gradient(#8db243, #5a3300);
}

</style>

<script type="text/javascript">
function dNdB(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="dNdB(this.id);">PPT</button>
</td>
<td>

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

</body>

</html>

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.
-OptimalDesigns (July 11, 2023, 09:31 AM)
--- End quote ---
Uhm... no, I don't think so.
It's actually no big difference to a standard A-HREF-tag. There you would have to put in the URL anyway. This is not more or less redundant than the 'onClick="dwldAndDisableButton(this.id);" '.
And I guess, there's more redundancy in all the TR- and TD-tags of a TABLE anyway. ;-)

You only have one TABLE, but 20+ ... 40+ ... buttons. How would you distinguish the URLs?
You can of course rename the function "dwldAndDisableButton()" to something shorter... like "dNdB()" or even just "x()". But from the view of a programmer, always try to name your variables and function to something intuitive and self-explaining, so you don't get lost in your code if you want to change it in two years, when you have to work yourself through understanding your own code.

You could though put all the URLs into the HEAD/SCRIPT-section, where your function is.
You could put all the URLs there in variables like

--- --- URL01=abc.ppt
URL02=abc.pdf
URL03=...
and so on.
Then you could call your function within your "onClick" by

--- --- onClick="dNdB(this.id,'URL01')"But I see no point in this, as on the one hand it doesn't really make your code shorter (as you now have to pass two arguments to your function, one to tell the button-ID to change the button-style and one to define the URL), and on the other hand you produce "overhead" in the function itself, because every time you call the function, all your URL-variables have to be initialized of which you only need one.
Imagine a page with 500 buttons, thus 500 URL-variables in your function. Every time you click a button, all 500 URL-variables are parsed, and then you select one of them... no very performant.
Just tell the function what URL you want in the first place.

4. Any 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.
-OptimalDesigns (July 11, 2023, 09:31 AM)
--- End quote ---
Filename in TR? From the original template, there's 2 button in a table-row (TR) with different URLs.
So there would have to be two URLs in one TR-tag that would have to be distinguished from one another.
Does not appear plausible to me.
You could put the URL in the table-data (TD = table-cell), as there is one button per TD, but what's the use? The amount of code stays the same if I move the URL from the BUTTON-tag to the TD-tag.
Same with TR... just cumulating two URLs from the buttons to two URLs in the TR surrounding it.
Just needs some additional JS-code to get from 'this.id' (i.e. the button) to the parent-element 'TD' and/or the parent-element of that, the 'TR'.

Don't get me wrong, there are ways of optimizing this and maybe making the code a little more compact, but that would need a database-system with PHP or ASP or similar. And I guess we're FAR away from that point where you want to setup a PHP-server or something like that.

ProCompSys:
After a little thinking and re-reading, I now think I understand what you mean by putting filename in TR and filetype in TD/BUTTON:
The filename stays identical whithin a row, just the fileformat changes over the columns, right?
Would be possible, but... this appears a little too much 'over the top' of compressing code and avoiding redundancy.
I could try to make it work... shouldn't be much of a deal... but... really? :-\

ProCompSys:
Looks like this:

I added another line with filename(s) "def".
To avoid errors when clicking, the filenames have to exist, of course. At least as dummy-files.

Code like this:

--- Code: HTML5 ---<html> <head> <STYLE TYPE="text/css"> td { padding:10px; } .button { padding: 6px 16px; border: 1px solid green; border-radius: 0 8px 8px; box-shadow: 0 lpx 5px gray; color: white; text-shadow: 0 -1px 1px #333; font-size: 20px; line-height: 30px; background: #5a9900 linear-gradient(#8db243, #5a9900); } .button:disabled { background: #808080 linear-gradient(#C0C0C0, #808080); } </style> <script type="text/javascript"> function dNdB(whichOne) { // read VALUE-attribute to get filetype fileType=document.getElementById(whichOne).value; // read TITLE of parent-node (TR) to get filename (without extension) fileName=document.getElementById(whichOne).parentNode.parentNode.getAttribute("title"); // creating fileUrl from fileName + "." + fileType fileUrl=fileName + "." + fileType; // for testing purposes // alert(fileUrl); // 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" title="abc"> <td> Descript 1 [abc] </td> <td> <button id="btn1-1" class="button btn1" value="ppt" onClick="dNdB(this.id);">PPT</button> </td> <td> <button id="btn2-1" class="button btn2" value="pdf" onClick="dNdB(this.id);">PDF</button> </td> <td> <button id="btn3-1" class="button btn3" value="doc" onClick="dNdB(this.id);">DOC</button> </td> </tr> <tr class="topic" title="def"> <td> Descript 2 [def] </td> <td> <button id="btn1-2" class="button btn1" value="ppt" onClick="dNdB(this.id);">PPT</button> </td> <td> <button id="btn2-2" class="button btn2" value="pdf" onClick="dNdB(this.id);">PDF</button> </td> <td> <button id="btn3-2" class="button btn3" value="doc" onClick="dNdB(this.id);">DOC</button> </td> </tr> </table> </body> </html>

OptimalDesigns:
1. okay, will go with files opening AND no saving.
2. How to change background-color to lightgray for 'this.id' button?
-OptimalDesigns (July 11, 2023, 09:31 AM)
--- End quote ---
The button design ist determined by the browser, if no special format is defined.
But you can change the appearance using CSS-code.
Though in my case, the button WAS changed to light grey (see screenshot).

[ Invalid Attachment ]

Dealing with CSS (cascading style-sheets) is not really complicated, but if you're completely new to that matter it might need some work on the basics to it.
See updated source-code below.
I put some CSS-code for the buttons in the HEAD-section,
referencing the BUTTON-class via the .button-section (mind the dot at the beginning!) as such (i.e. for all buttons),
and another class called .btn1 that only applies to the first button, as the second one has the class "btn2" (all taken from your original template).
If you're not familiar with CSS - at least with the basics - this might not be the best time to go for it, if you need fast results with your button-page... you might get lost in the middle of nowhere. ;-)
[/quote]

I have several <tables> on one webpage, so your general <scripts> and <styles> don't work as stated. My buttons colors are set as:
<style>
.btn1 {background-color: #4CAF50;} /* Green */
.btn2 {background-color: #008CBA;} /* Blue */
</style>
Which may explain why no lightgray came thru, true?

3 & 4 ... okay will go with what you gave me.

OptimalDesigns:
Hmm, code looks good, but still need a way to limit <styles> to just this one <table>.

Update! Passing filename in <tr> working, I think. Tested using 'alert' function and all look good. But, a note pops up saying "Pop-up blocked" or something along this line, ideas? So, no download or opening of file.

Here it is on my website; https://goal-driven.net/download/new.html .

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version