CODEWITHSUNDEEP
javascript
Christian
Christian

Reputation: 691

redirect to webpage depending on selection in two select drop downs

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 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 www.exampledomainII.

If it is part of a second array than it should go to 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

Upvotes: 0

Views: 384

Answers (3)

Reporter
Reporter

Reputation: 3948

Here a simple solution for your question

    <html>
    <head>
        <script>
            function loadNew()
            {
                selectLetter = document.forms[0].letter.value.toString() + document.forms[0].number.value.toString();
                switch (selectLetter)
                {
                    case "B2", "C1":
                        location.href = "www.exampledomainII.com";
                        break;
                    default:
                        location.href = "www.exampledomainI.com";
                        break;
                }
            }

            function visibilityT()
            {
                if (document.forms[0].letter.value.toString() == "A")
                {
                    document.forms[0].number.style.visibility = "hidden";
                } else {
                    document.forms[0].number.style.visibility = "visible";
                }
            }
        </script>
    </head>
    <body onLoad="visibilityT()">
        <form onSubmit>
        <select name="letter" id="letter" onChange="visibilityT()">
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>

<select name="number" id="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option> 
<option>5</option> 
<option>6</option> 
</select>  
            <input type="button" value="submit" onClick="loadNew()">
        </form>
    </body>
</html>

Upvotes: 0

Packet Tracer
Packet Tracer

Reputation: 3924

cannot understand very well your explanation but this may illustrate a little

letter_value = document.getElementById('letter').value;
number_value = document.getElementById('number').value;

if (letter_value == 'A') {
  window.location = 'www.exampledomainI';
}
else {
  //cannot understand your explanation for this cases, but just use if else for each case, for example
  if (letter_value == 'B' && (number_value == 1 || number_value == 3)) {
    window.location = 'www.exampledomainII';
  }

  if () {
    ...
  }
}

Upvotes: 0

RobG
RobG

Reputation: 147413

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>

Upvotes: 2

Related Questions