how to open window after submitting chained select (jquery)

Question

So I have a chained select about railway stations. People have to choose their begin station and their destination.

<form action="#" id="routeform" method="GET">
  <select class="station" name="station">
    <option value="Antwerpen">Antwerpen-Centraal</option>
    <option value="Bergen">Bergen</option>
    <option value="Brugge">Brugge</option>
    <option value="Brussel">Brussel</option>
    <option value="Charleroi">Charleroi-Zuid</option>
    <option value="DePanne">De Panne</option>
    <option selected="selected" value="Gent">Gent-Sint-Pieters</option>
    <option value="Hasselt">Hasselt</option>
    <option value="Kortrijk">Kortrijk</option>
    <option value="Leuven">Leuven</option>
    <option value="Luik">Luik-Guillemins</option>
    <option value="Namen">Namen</option>
    <option value="Oostende">Oostende</option>
    <option value="Roeselare">Roeselare</option>
  </select>
  <select class="series" name="series">
    <option value="">--</option>
    <option value="Antwerpen" class="Gent">Antwerpen-Centraal</option>
    <option value="Bergen" class="Gent">Bergen</option>
    <option value="Brugge" class="Gent">Brugge</option>
    <option value="Brussel" class="Gent">Brussel</option>
    <option value="Charleroi" class="Gent">Charleroi-Zuid</option>
    <option value="DePanne" class="Gent">De Panne</option>
    <option value="Hasselt" class="Gent">Hasselt</option>
    <option value="Kortrijk" class="Gent">Kortrijk</option>
    <option value="Leuven" class="Gent">Leuven</option>
    <option value="Luik" class="Gent">Luik-Guillemins</option>
    <option value="Namen" class="Gent">Namen</option>
    <option value="Oostende" class="Gent">Oostende</option>
    <option value="Roeselare" class="Gent">Roeselare</option>
    <option value="Gent" class="Antwerpen">Gent-Sint-Pieters</option>
    <option value="Brugge" class="Kortrijk">Brugge</option>
    <option value="Gent" class="Kortrijk">Gent-Sint-Pieters</option>
    <option value="Roeselare" class="Kortrijk">Roeselare</option>
    <option value="Gent" class="Brugge">Gent-Sint-Pieters</option>
    <option value="Kortrijk" class="Brugge">Kortrijk</option>
    <option value="Oostende" class="Brugge">Oostende</option>
    <option value="Roeselare" class="Brugge">Roeselare</option>
    <option value="Brugge" class="Oostende">Brugge</option>
    <option value="Gent" class="Oostende">Gent-Sint-Pieters</option>
    <option value="Brussel" class="Bergen">Brussel</option>
    <option value="Gent" class="Bergen">Gent-Sint-Pieters</option>
    <option value="Brussel" class="Namen">Brussel</option>
    <option value="Gent" class="Namen">Gent-Sint-Pieters</option>
    <option value="Bergen" class="Brussel">Bergen</option>
    <option value="Charleroi" class="Brussel">Charleroi-Zuid</option>
    <option value="Gent" class="Brussel">Gent-Sint-Pieters</option>
    <option value="Hasselt" class="Brussel">Hasselt</option>
    <option value="Leuven" class="Brussel">Leuven</option>
    <option value="Luik" class="Brussel">Luik-Guillemins</option>
    <option value="Namen" class="Brussel">Namen</option>
    <option value="Brussel" class="Leuven">Brussel</option>
    <option value="Gent" class="Leuven">Gent-Sint-Pieters</option>
    <option value="Hasselt" class="Leuven">Hasselt</option>
    <option value="Luik" class="Leuven">Luik-Guillemins</option>
    <option value="Brussel" class="Hasselt">Brussel</option>
    <option value="Gent" class="Hasselt">Gent-Sint-Pieters</option>
    <option value="Leuven" class="Hasselt">Leuven</option>
    <option value="Brussel" class="Charleroi">Brussel</option>
    <option value="Gent" class="Charleroi">Gent-Sint-Pieters</option>
    <option value="Brussel" class="Luik">Brussel</option>
    <option value="Gent" class="Luik">Gent-Sint-Pieters</option>
    <option value="Leuven" class="Luik">Leuven</option>
    <option value="Gent" class="DePanne">Gent-Sint-Pieters</option>
    <option value="Brugge" class="Roeselare">Brugge</option>
    <option value="Gent" class="Roeselare">Gent-Sint-Pieters</option>
    <option value="Kortrijk" class="Roeselare">Kortrijk</option>
  </select>
  <br/>
  <input type="submit" value="Go" />
</form>

Every outcome has a different html.page it has to go to. I tried this for example (from Antwerp to Gent):

$('#routeform').submit(function () {
  if ($('select.station').val() == 'Antwerpen') && ($('select.series').val() == 'Gent') {
    window.open("contact.html", "_self");
  }
  return false;
});

But it doesn't work and I can't find the problem...

Thanks in advance!

Manse · Answer 1 · 2012-06-09T19:50:25.723

0

Try this :

$('#routeform').submit(function (evt) {
  if (($('select.station').val() == 'Antwerpen') && ($('select.series').val() == 'Gent')) {
    window.open("contact.html", "_self");
  }
  evt.preventDefault(); // this prevents the submit
});

Your brackets weren't correct

or

if ($('select.station').val() == 'Antwerpen' && $('select.series').val() == 'Gent') {

As you dont have to include the statements within the if within brackets - its still valid

Working example here

edited Jun 09 '12 at 19:50

answered Jun 09 '12 at 19:45

Manse

37,765
10
83
108

@AnneliesSiersack ensure you surround your code in `$(document).ready(function() { // your code here });` to ensure the DOM is loaded before the code is executed – Manse Jun 09 '12 at 19:49

how to open window after submitting chained select (jquery)

1 Answers1