Link location change based on select box

Question

I have a file manager that i want to try and encourage users to download. I've seen sites do something similar but don't know what its called to try and search for a similar post.

This is like what i want. If the "Use Manager" is ticked it will give them a different URL to when it is un-ticked.

Hope this makes sense.

Thanks

Answer 1

Plain JavaScript:

// Get DOM objects ready
var checkbox = document.querySelector('input[type="checkbox"]'),
    downloadButton = document.querySelector('a#download');

// Set up function to change URL
function chooseUrl() {
    var url =
        checkbox.checked ? 'http://example.com/default_download' : 'http://example.com/secondary_download';

    downloadButton.setAttribute('href', url);
}

// Change URL on checkbox value change
checkbox.addEventListener('change', chooseUrl);

// Run chooseUrl once to set initial value
chooseUrl();

Demo on JSFiddle

---

JavaScript + jQuery:

// Get jQuery-wrapped DOM objects ready
var checkbox = $('input[type="checkbox"]'),
    downloadButton = $('a#download');

// Set up function to change URL
function chooseUrl() {
    var url =
        checkbox.is(':checked') ? 'http://example.com/default_download' : 'http://example.com/secondary_download';

    downloadButton.attr('href', url);
}

// Change URL on checkbox value change
checkbox.on('change', chooseUrl);

// Run chooseUrl once to set initial value
chooseUrl();

Demo on JSFiddle

Answer 2

What you would want to do is handle a click event on your checkbox and according to it's value (checked or unchecked), modify the href property of the "Download Now" link.

$( "#your_checkbox" ).on( "click", function(){
  var link = "http://some_link.com"; // default link for unchecked
  if ( $(this).is( ":checked" ) ){
    link = "http://some_other_link.com"; // modified link for checked
  }
  $( "#your_download_btn" ).attr( "href", link ); // setting the href
});

Here is a simple demo.

Answer 3

Here's a simple jQuery example for exactly what your trying to do: http://jsfiddle.net/9g6Wn/2/

var btn = $('#btn1');
var chk = $('#chk1');

btn.click(function () {
    if (chk.is(':checked') == true) {   // if the checkbox is checked
        location.assign('http://en.wikipedia.org/wiki/Apple_Inc');
    } else {
        location.assign('http://en.wikipedia.org/wiki/Apple');
    }
});