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.

Answer 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:

1. 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.

2. 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;