mardi 29 mars 2016

Redirect to different pages based on which combination of checkboxes are checked

First, I've found a bunch of answers here that address individual aspects of my issue, but, for the life of me, I can't wrap my head around stitching them all together to function how I need them to.

Basically, I've got a single form with two groups of checkboxes -- the first containing 12 fruits (apples, oranges, kiwis, blueberries, etc) and the second containing 9 colors (red, yellow, blue, green, etc).

There are several combinations a user can create, but I'm only interested in whether a user selects 'apples' from the first group and/or 'red' or 'green' from the second group. There are three different landing pages that a user can reach based on their selections:

  • Users that select 'apples' from the first group AND ALSO 'red' AND/OR 'green' from the second group get redirected to page1a.html
  • Users that select ANYTHING BUT 'apples' from the first group AND ALSO select 'red' AND/OR 'green' from the second group get redirected to page1b.html
  • Users that select ANYTHING BUT 'apples' OR 'red' OR 'green' are redirected to page1c.html

I think I understand how to check to see if a single checkbox is checked:

var isChecked = $('input[name="apples"]:checked').length > 0;

I've given the 'apples,' 'red' and 'green' checkboxes unique classes and names so that I can target them:

<input type="checkbox" class="apples" name="apples" value="apples" />
<input type="checkbox" class="red" name="red" value="red" />
<input type="checkbox" class="green" name="green" value="green" />
etc.

I more or less know how to redirect the user to a location. What's beyond my capability is how to handle these combination scenarios.

Has anyone done something like this using js and care to share your knowledge? Thanks in advance!




Aucun commentaire:

Enregistrer un commentaire