CODEWITHSUNDEEP
javascriptjqueryhtml
Adrian Reyes
Adrian Reyes

Reputation: 11

Selected option values of a drop down are not being picked up jQuery

I have a simple two drop down form that needs to redirect based on the given values on a drop down.

jQuery(document).ready(function(){

	var location = jQuery('#Location option:selected').val();
	var style = jQuery('#Style option:selected').val();
	
  	jQuery('#DropSearch').click(function (e){
      e.preventDefault();
      e.stopPropagation();
    	window.location.href = 'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style;
	});
});
<form id="CustomSearch">
<select id="Location">
		<option value='northeast'>North East</option>
		<option value='west'>West</option>
		<option value='midwest'>Mid West</option>
		<option value='south'>South</option>
	</select>

	<select id="Style">
		<option value='industrial'>Industrial</option>
		<option value='farmhouse'>Farmhouse</option>
		<option value='contemporary'>Contemporary</option>
		<option value='beach+style'>Beach Style</option>
		<option value='traditional'>Tradtional</option>
	</select>

	<button id="DropSearch">
<i class="fa fa-search" aria-hidden="true"></i></button>
</form>

For some reason the redirect only picks up on the first options of the dropdowns (or the selected option when the browser window loads)...... any idea as to why this is happening? http://showroomworldwide.com/ you can visit the url for the working example.

Upvotes: 1

Views: 50

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

You don't need to test for the selected option. Just get the value of the select. The val() method will return to you the current value of the field and that value will be whatever is selected.

But, you have to get these values when the button is clicked, not before.

Also, since you are not using a submit button, there is no native behavior that needs to be cancelled, so you can remove the e.preventDefault() and the e.stopPropagation().

$(function(){

  $('#DropSearch').click(function (e){
    
    // Now that the button has been clicked, just get the
    // value of the elements. No need to get the selected option
    var location = jQuery('#Location').val();
    var style = jQuery('#Style').val();
    
    // Test to see if the right choices were stored:
    console.log(location, style);
    
    window.location.href = 
      'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + 
      location + '&stype=gd_place&s=' + style;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CustomSearch">
<select id="Location">
		<option value='northeast'>North East</option>
		<option value='west'>West</option>
		<option value='midwest'>Mid West</option>
		<option value='south'>South</option>
	</select>

	<select id="Style">
		<option value='industrial'>Industrial</option>
		<option value='farmhouse'>Farmhouse</option>
		<option value='contemporary'>Contemporary</option>
		<option value='beach+style'>Beach Style</option>
		<option value='traditional'>Tradtional</option>
	</select>

	<button id="DropSearch">
<i class="fa fa-search" aria-hidden="true"></i></button>
</form>

Upvotes: 1

Taplar
Taplar

Reputation: 24965

var location = jQuery('#Location option:selected').val();
var style = jQuery('#Style option:selected').val();

You are doing these lines immediately at the start of your document ready. As such their value will be whatever they were on page load. They are not re-evaluated upon the click logic. Move these into your click logic if you want to pickup the values as they are at the time of the click.

Upvotes: 1

Related Questions