Javascript: Setting Default Variable in Drop down menu

Question

2 Questions, I have a form that lists 3 locations. Upon submitting the form I would like the variable "event_location" to equal whichever location was chosen in the drop down menu. The only thing I don't understand is, what if the user doesn't select a location at all, i.e. the user just uses the default location(the first one that shows up). I don't think my javascript code accounts for this. Below I have included both the html and javascript.

<select name="location" id="event_location" onchange='getSelectedValue();'>
<option value="sandiego">San Diego</option>
<option value="losangeles">Los Angeles</option>
<option value="sanfrancisco">San Francisco</option>
</select>

function getSelectedValue() {

var event_location = document.getElementById('event_location').value;


}

The function getSelectedValue() only happens when the 'onchange' event is triggered. So if they are satisfied with San Diego as their first option, they won't trigger the onchange event. Should I just declare event_location = 'sandiego' outside of the function?

The other tricky part is based on which event_location they pick(san diego, los angeles, or san francisco), my javascript changes which URL they are directed to. How can I change the URL to account for which event_location they picked. For example if they picked san diego, once they hit the search button it will take them to: http://myurl.com/sandiego. Here is the html and javascript I have so far for my second function:

<input type='button' value='Search' onclick='eventViewer();' />

function eventViewer() {
   function getSelectedValue() {
       var event_location = document.getElementById('event_location').value;
       }

   if (event_location = 'losangeles') {
      window.open( 'http://...' )
      }
   else if (event_location = 'sanfrancisco') {
      window.open( 'http://...' )
      }
   else {
      window.open( 'http://...' ) //link to san diego
      }
   }

Rather than creating 2 seperate functions you can just grab the values from a dropdown box using the standard

var event_location = document.getElementById('event_location').value;

This will grab whatever value is in the drop down menu. So you don't have to worry about variable scope with 2 different functions, you can just declare all of your variables upon 1 'OnClick' event.

Why dont you add a dummy option None as the first option, so when user doesnt select anything, (s)he doesnt go anywhere? — Adithya Surampudi
– Adithya Surampudi, Commented Jun 16, 2011 at 21:55
so like a blank field? usability wise do you think that is the best choice? — yoshyosh
– yoshyosh, Commented Jun 16, 2011 at 21:58
Yes, its a common practice, and you would be sure that the user has looked at the options and selected one. Other wise there is no way to make a decision on whether the user forget to select an option or didnt do anything because he wanted to select the defaultr — Adithya Surampudi
– Adithya Surampudi, Commented Jun 16, 2011 at 22:01
To account for scope, if I have them as 2 seperate functions, the variable will only apply to that function. I am very new to javascript =/ — yoshyosh
– yoshyosh, Commented Jun 16, 2011 at 22:01

Peter Nixey · Accepted Answer · 2011-06-16 22:11:59Z

1

In answer to the first part of your question, instead of using onchange attached to the select element, you can change to using onsubmit attached to the form element, that way, the variable will be populated regardless of whether or not it has been changed:

<form action='/process_form' onsubmit="getSelectedValue();">
...
</form>

Could you clarify the second part of your question into an actual question - I'm not sure what you're asking at the moment.

EDIT:

Two things which might make the second part of your question easier:

If there are no other dependencies then make the 'value' of each select item in the dropdown the URL to which you want to send the person. That way you can simply read the URL from the select value and send them there directly without any need for translation using a case statement.
Try using a switch statement instead of a cascading if/else, it's easier to read and to debug. You can also reduce the amount of code and improve its clarity by moving the action (i.e. window.open) to the bottom of the switch statement and using each switch only to set the variable:

e.g.

switch(event_location)
{
  case "san_francisco":
     var url = 'http://sanfrancisco.com'
     break;
  case "san_diego":
     url = 'http://sandiego.com'
     break;
  default:
     alert('please choose a city')
}
url ? window.open(url) : null;

edited Jun 16, 2011 at 22:11

answered Jun 16, 2011 at 22:00

Peter Nixey

16.6k15 gold badges86 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yoshyosh Over a year ago

sorry, I hope my changes clarified it. There are dependencies, since I have one function that is triggered by clicking search, and one function that is triggered by selecting an event_location. I will look into using switch statements. I think my biggest issue with connecting the two functions lies with variable scope. Thank you for your patience and response! I really appreciate it

Peter Nixey Over a year ago

I think I get the drift of where you're going but it's still not very clear. You've referred to scope issues a number of times but I'm not sure what they are. The code you've shown should account for everything correctly. If it doesn't look like the code works you might consider whether the UI actually requires two dropdowns but it's hard to be sure out of context.

yoshyosh Over a year ago

I should have mentioned that there was a "Enter coupon number" field before the location, that probably would have made it a bit more clear. I will keep hacking at it and see if I run into any issues. I almost got it :), thanks for your help

roberkules · Accepted Answer · 2011-06-16 22:02:13Z

0

function eventViewer() 
    var event_location = document.getElementById('event_location').value;      

    if (event_location = 'losangeles') {
        window.open( 'http://...' )
    } else if (event_location = 'sanfrancisco') {
        window.open( 'http://...' )
    } else {
        window.open( 'http://...' ) //link to san diego
    }
}

usually you would use server side code (php, asp.net, java, ...) to store the users selection, but if thats not an option, just save it iin a cookie via javascript.

answered Jun 16, 2011 at 22:02

roberkules

6,6052 gold badges46 silver badges52 bronze badges

1 Comment

yoshyosh Over a year ago

thank you for the suggestion, I am extremely new to javascript having studied it for only a day, I guess my methods do seem a bit hackish when it comes to standards haha

Collectives™ on Stack Overflow

Javascript: Setting Default Variable in Drop down menu

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related