CODEWITHSUNDEEP
javascriptbuttonhtml-select
nicorellius
nicorellius

Reputation: 4053

Select Download File from One of Two Select Boxes with One Button - JavaScript

I have two select boxes like so:

<select id="one">
    <option value="default">Select File</option>
    <option value="path/to/file1">File One</option>
    <option value="path/to/file2">File Two</option>
    <option value="path/to/file3">File Three</option>
</select>

<select id="two">
    <option value="default">Select File</option>
    <option value="path/to/file4">File Four</option>
    <option value="path/to/file5">File Five</option>
    <option value="path/to/file6">File Six</option>
</select>

<p class="button_image">
    <a onclick="download(document.getElementById("one").value)"></a>
</p>

Here is my download function:

function download(file) {
    if (file == 'default') return;
    window.location = 'http://www.example.com/download/' + file;
}

This works fine for one select box, but I can't seem to figure out how to use the same button image. Oh yah, the p.class=button_image has background image that is a button with hover effects.

The reason I want these select boxes to be separate is because they each represent a group of files, eg, 32-bit versus 64-bit. So they cannot be combined, because it won't flow with the page design.

I've tried some if/else blocks in PHP using the getElementById but I'm getting stuck. This is what I tried and it seems to only partially work:

<?php
                        
if ('document.getElementById(\"one\")' == 'one') {
    echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}

else if ('document.getElementById(\"two\")' == 'two') {
    echo "<a onclick='download(document.getElementById(\"one\").value)'></a>";
}

?>

I should mention that PHP isn't strictly necessary for this. I simply tried it because of its use in the server-side code. I'm happy to consider any working solution.

Thanks.

** EDIT **

This design may be flawed, but the intention is to allow the download of either a file from box one or a file from box two. Selecting one should reset the other to its default state, and vice versa. I'm currently working on implementing this.

** EDIT **

I ultimately chose Dawson Loudon's answer for one part, and I created a separate function based on Barmar's comment, as follows:

// resets other select box when selected
function reset_index(id) {
    document.getElementById(id).selectedIndex = 'default';
}

Upvotes: 0

Views: 3373

Answers (2)

RobG
RobG

Reputation: 147483

An A element as a button doesn't seem appropriate, just use an img.

Anyhow, a function to use the first select with a selected option other than the first can be something like:

function getPath() {
  var select;
  var args = arguments;

  for (var i=0, iLen=args.length; i<iLen; i++) {
    select = document.getElementById(arg[i]);

    if (select && select.selectedIndex > 0) {
      window.location = 'http://www.mysite.com/download/' + select.value;
    } 
  } 
}

The above expects the first option to be the default selected, so if it's selected, or no option at all is selected, the select's selectedIndex will be 0 or -1 respsectively. I would ensure one option is selected by adding the selected attribute to the first one:

  <option value="default" selected>Select File</option>

and the call is:

<img src="buttonImage.jpg" onclick="download('one', 'two');">

though you might want to add a class to the select elements and get them using getElementsByClassName or similar and loop over that collection, rather than hard code the ids.

Upvotes: 2

Dawson Loudon
Dawson Loudon

Reputation: 6029

Try replacing this:

<p class="button_image">
    <a onclick="download(document.getElementById('one').value)"></a>
</p>

with:

<p class="button_image">
    <a onclick="download(document.getElementById('one').value, document.getElementById('two').value)"></a>
</p>

and then replace your download function with this:

function download(file1,file2) {
    if (file1 == 'default' && file2 == 'default'){
      return;
    }
    else if(file1 != 'default'){
      window.location = 'http://www.mysite.com/download/' + file1;
    }
    else{
      window.location = 'http://www.mysite.com/download/' + file2;
    }
}

Upvotes: 1

Related Questions