Reputation: 2659

Disable button when second option from select element is not picked

I have two select dropdowns and a button. I want the button to be disabled when no second option is selected except for one option.

When I select a first option, the second field appears except for one option, with that one option there is only one select element so the button must be clickable then.

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();

  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>

I tried to disable the button from the start and enable it on change, but that does not work because when shoppen is selected the code stops working.

shoppen is also the option where the button needs to be enabled all the time.

How can I fix this?

Upvotes: 2

Answers (2)

zer00ne

Reputation: 43880

`<select>` tags

Changes to OP

HTML & CSS

<form> will send data to a live test server when a submit event is fired.
A response from the live test server will be posted to an <iframe>.
With the exception of select#primary and the "dummy" <select> tag, all <select> tags have .secondary, .hide, and [name=secondary]. By default, they are also [disabled].
.hide is now useful -- CSS: .hide {display: none} -- using add/removeClass() instead of hide/show() methods.
The first <option> tag of every <select> has been changed:
```
<option value="" selected>...</option>
```
Now all that's needed to reset <select> tags is:
```
$('select').val('');
```

jQuery

There are two types of <select> tags that are registered to the change event: $('#primary') and $('.secondary').

When $('#primary') is triggered, all $('.secondary') are reset:

$('.secondary').addClass('hide').prop('disabled', true).val('');

The object placesLists was unnecessary. By using the value of $('#primary'), an #ID selector can be determined dynamically:
```
...
var category = $(this).val();
$('#' + category).removeClass('hide').prop('disabled', false).val('');
```
The callback function that triggers when a change event occurs on $('.secondary') is simple:
```
     ...
     if ($(this).val() === '') {
       $('.send').prop('disabled', true);
     } else {
       $('.send').prop('disabled', false);
     }
```
This ensures that the input[type=submit] button is [disabled] when $('.secondary') hasn't been selected yet.

Demo

<!DOCTYPE html>
<html>

<head>
  <style>
    form,
    iframe,
    hr {
      width: 96%
    }
    
    select {
      display: inline-block;
    }
    
    #primary {
      width: 45%
    }
    
    .send {
      float: right;
    }
    
    .secondary {
      width: 52%;
      margin: 0 0 5px 5px
    }
    
    .hide {
      display: none
    }
    
    hr {
      clear: both;
    }
  </style>
</head>

<body>

  <form id="list" action="https://httpbin.org/post" method="post" target='response'>
    <select id="primary" name="primary">
      <option value="" selected>Wat wil je gaan doen?</option>
      <option value="shop">Shoppen</option>
      <option value="dining">Uit eten</option>
      <option value="food">Snacken / snoepen</option>
      <option value="drink">Drankje doen</option>
      <option value="events">Evenementen bezoeken</option>
      <option value="booking">Stappen</option>
      <option value="culture">Cultuur snuiven</option>
      <option value="sites">Sightseeing</option>
      <option value="kids">Kids</option>
      <option value="info">Meer info</option>
    </select>

    <select class="secondary">
      <option>Verfijn je keuze</option>
    </select>

    <select id="dining" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="ontbijt">Ontbijt</option>
      <option value="lunch">Lunch</option>
      <option value="diner">Diner</option>
      <option value="vis">Vis</option>
      <option value="vlees">Vlees</option>
      <option value="broodje">Broodje</option>
      <option value="patatje">Patatje</option>
      <option value="tapas">Tapas</option>
      <option value="hamburger">Hamburger</option>
      <option value="grieks">Grieks</option>
      <option value="pizza">Pizza</option>
      <option value="pasta">Pasta</option>
      <option value="traiteur">Traiteur</option>
    </select>
    <select id="food" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="snelle snack">Snelle snack</option>
      <option value="snoepen">Snoepen</option>
      <option value="IJsje">IJsje</option>
      <option value="kroketje">Kroketje</option>
      <option value="brammetje">Brammetje</option>
    </select>
    <select id="drink" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="iets fris">Iets fris</option>
      <option value="thee">Thee</option>
      <option value="koffie">Koffie</option>
      <option value="biertje">Biertje</option>
      <option value="wijntje">Wijntje</option>
      <option value="whiskey">Whiskey</option>
      <option value="cocktail">Cocktail</option>
      <option value="slush">Slush</option>
    </select>
    <select id="events" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="in het stadscentrum">In het stadscentrum</option>
      <option value="events">Evenement</option>
      <option value="braderie">Braderie</option>
      <option value="rondje dorp">Rondje dorp</option>
    </select>
    <select id="booking" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="eten">Eten</option>
      <option value="drinken">Drinken</option>
      <option value="theater">Theater</option>
      <option value="danser">Dansen</option>
      <option value="muziek">Muziek</option>
    </select>
    <select id="culture" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="kunst">Kunst</option>
      <option value="stadscentrum historie">Stadscentrum historie</option>
      <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
      <option value="culture">Cultuur</option>
      <option value="schilderen">Schilderen</option>
      <option value="kunst uitleen">Kunst uitleen</option>
      <option value="uitleen">Uitleen</option>
      <option value="galerie">Galerie</option>
      <option value="workshops">Workshops</option>
    </select>
    <select id="sites" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="architectuur bekijken">Architectuur bekijken</option>
      <option value="de boekenberg">De Boekenberg</option>
      <option value="theater de stoep">Theater de Stoep</option>
      <option value="voorstraat">Voorstraat</option>
      <option value="museum winkel">Museum winkel</option>
    </select>
    <select id="kids" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="speelgoed">Speelgoed</option>
      <option value="speeltuin">Speeltuin</option>
    </select>
    <select id="info" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="parkeren">Parkeren</option>
      <option value="naar de wc">Naar de wc</option>
      <option value="plattegrond bekijken">Plattegrond bekijken</option>
      <option value="koopzondagen">Koopzondagen</option>
      <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
    </select>
    <br>
    <input class='send' type="submit" value="Bekijk resultaten" disabled>
    <br>
    <hr>
    <iframe name='response'></iframe>

  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#primary').on('change', function() {
      $('.secondary').addClass('hide').prop('disabled', true).val('');
      var category = $(this).val();
      if (category === 'shop') {
        $('.send').prop('disabled', false);
      } else if (category === '') {
        $('.send').prop('disabled', true);
      } else {
        $('#' + category).removeClass('hide').prop('disabled', false).val('');
        $('.send').prop('disabled', true);
      }
    });

    $('.secondary').on('change', function() {
      if ($(this).val() === '') {
        $('.send').prop('disabled', true);
      } else {
        $('.send').prop('disabled', false);
      }
    });
  </script>
</body>

</html>

Upvotes: 1

Alvaro Montoro

Reputation: 29645

If I understood correctly, the submit button should be disabled at all times and only be active in these cases:

When "shoppen" is selected on the first dropdown
When an option different than the default one is selected for any of the other dropdowns

One thing that you can do is, when the first select value is changed, disable automatically the button, and only enable it if the value of that select is shoppen.

  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }

Also, when each of the other selects is displayed in the condition below, you mark the first option (the one that is not selectable and invalid) as selected. That way the logic will be enforced in case the user chooses and option, goes back to another, and comes back to this same one:

// move to the first disabled option to force selection
$(placesLists[value]).find("option:first-child()").prop("selected", true);

Finally, add a change event handler for all the selects that are not the first/main one and enable the button if the selected option is not null (the first one):

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();

  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);

  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

Plus disable the button by default with the disabled attribute.

Here is the code with those 3 changes:

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();
  
  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }
  
  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
    $(placesLists[value]).find("option:first-child()").prop("selected", true); // move to the first disabled option to force selection
  }
});

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();
  
  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  
  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten" disabled>
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>