Dropdown Form & Javascript

Question

I've been using the following code for a couple of years successfully... basically, it allows the user to select one of two options from the dropdown and gives them an option to click either button 'A' or 'B' to either download (the link is the same for both options), or view the selection online (two separate links).

I now need to add a third option to the list, but not having much luck? Here's the original code with the new OPTION 3 added, the javascript I've kept as the original as what I've tried so far is not working.

 <form>
  <select class="target">
   <option value="selected" selected="selected">Please choose...</option>
   <option value="option1" value="option3">OPTION 1</option>
   <option value="option2" value="option4">OPTION 2</option>
   <option value="option5" value="option6">OPTION 3</option>
  </select>  
<button type="button" class="button" id='button1'>BUTTON 1</button>
<button type="button" class="button" id='button2'>BUTTON 2</button>
</form>

<script>
var onSubmit1 = function()
{
	window.location = "http://www.link1.com/";
};

var onSubmit2 = function()
{
	window.location = "http://www.link2.com/";
};
var onSubmit3 = function()
{
	window.location = "https://www.link1.com/";
};

var onSubmit4 = function()
{
	window.location = "https://www.link3.com/";;
};

$('.target').change(function(e) {    
	var dropdown = $('.target');
	var text = $( ".target option:selected" ).text();    

	var $button1= $('#button1');
	$button1.unbind('click');

	if(text == "OPTION 1"){
		 $button1.click(onSubmit1);
		return;
	}

   $button1.click(onSubmit2);      
});

$('.target').change(function(e) {    
	var dropdown = $('.target');
	var text = $( ".target option:selected" ).text();    

	var $button2= $('#button2');
	$button2.unbind('click');

	if(text == "OPTION 1"){
		 $button2.click(onSubmit3);
		return;
	}

   $button2.click(onSubmit4);      
});
</script>

Does anyone have any ideas... is it at all possible with the above code?

Answer 1

As people have mentioned, you are massively overusing and overcomplicating this code. It's quite simple if you try it like this:

<form id="myForm">
    <select>
        <option selected disabled>Please choose...</option>
        <option value="http://www.link1.com">OPTION 1</option>
        <option value="http://www.link2.com">OPTION 2</option>
        <option value="http://www.link3.com">OPTION 3</option>
    </select>  
    <button type="button" data-action="follow">GO TO URL</button>
    <button type="button" data-action="download">DOWNLOAD</button>
</form>

Note that I've added data-action to your buttons, so I can recognise which button does what. I've also changed your values of the select to the actual values you want them to represent, instead of placeholders you have to change.

Just to be correct, I've also 'disabled' your first option so it can't be reselected, and I've removed its value as it shouldn't have one. I've added an id to the form element, as it allows me to do all without to many classes, and I removed all your classes. I've also ommitted the ="selected" as you don't need it (unless you are using XSL Transforms, which is just... Blurgh.)

$("#myForm button").click(function(event){
    event.preventDefault();
    var url = $("#myForm select").val() || false;
    var action = $(this).data("action");
    if(action === "follow" && url){
        /* Follow the link */
        window.location.href = url;
        /* While testing, you could use alert instead of window.location.href
         * as such:
         * alert(action + " " + url)
         */
    } else if(action === "download" && url){
        /* Do the download thing, since I don't know how 
           you're doing that, heres a fictional one: */
        window.location.href = "http://www.link.com/download.php?url=" + url;
        /* While testing, you could use alert instead of window.location.href
         * as such:
         * alert(action + " " + url)
         */
    }
});

Now all we need to do is see what button your pressed (tying this to all buttons and then reading the data-action) and then executing whatever you wanted to execute. Note that I'm using the line var url = $("#myForm select").val() || false; to select either a value or assign it false - this is to prevent your 'default' option from triggering the function (I later check if url has a value in the if statement).