Question

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.mysite.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 note that I don’t necessarily need to use PHP in this case to solve this problem. It was just an option I tried because I’m using PHP for the server-side programming. I could be happy with any number of options, so long as they work.

Thanks.

** EDIT **

This design might be flawed. But the intention is that either a file from box one is downloaded OR a file from box two is downloaded. If one selection is made, then the other should be rest to default and vice versa. This is what I’m working on now.

** EDIT **

I ended up goign with Dawson Loudon’s answer for one part and I created another function based on Barmar’s comment that looks like this:

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

Answer 1

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