Question

I need a javascript solution for the following situation:

I have two select drop down menus. The combination of the two of them will redirect to either of three websites after clicking the submit button:

www.exampledomainI
www.exampledomainII
www.exampledomainIII

If “A” selected it always should go straight to http://www.exampledomainI. No selection of id=”number” necessary (select menu id=”number” should disappear when selected and vice versa reappear when selection is anything else then “A” in id=”letter”)

IF the combination (eg A4 or C1 etc) is part of an array within the JavaScript than it should go to http://www.exampledomainII.

If it is part of a second array than it should go to http://www.exampledomainIII.

<select id="letter">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<select id="number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option> 
  <option>5</option> 
  <option>6</option> 
</select>  

<input type="submit">

Thanks a lot

Answer 1

Put the elements in a form, give the options a value attribute, attach an onsubmit listener to the form. If javascript is enabled, do the logic and set window.location.href appropriately. If javascript is disabled, not available or fails, have the server do the logic. e.g.

<form action="..." onsubmit="return doRedirect(this);">
  <select id="letter">
    <option value="A">A
    <option value="B">B
    <option value="C">C
  </select>

  <select id="number">
    <option value="1">1
    <option value="2">2
    <option value="3">3
  </select>  

  <input type="submit">
</form>

<script type="text/javascript">
function doRedirect(form) {
  var letter = form.letter.value;
  var number = form.number.value;

  if ( /* some tests using letter and number */) {
    window.location.href = 'http://whatever.com';
    return false;

  } else if ( /* some other tests using letter and number */) {
    window.location.href = 'http://whatever.com';
    return false;

  } else if ( /* and so on... */) {
    /* whatever */
    return false;
  }
}
</script>