show hidden div based on dropdown selection

Question

I have a Member Registration Form that contains a dropdown. It is for events so firstly they enter their membership details, select an event and then the number of tickets they wish to purchase. The options are as follows:

• Member
• Member + 1 Guest
• Member + 2 Guests
• Member + 3 Guests, and so on.

What I want to happen is that because "Members" are FREE to attend, I want to keep the payment div hidden unless they select Member + xxxx.

I am a complete novice when it comes to javascript/jquery but I can understand most of it when its written.

I have a JSfiddle (http://jsfiddle.net/bEuRh/) created with some basics but I need a hand writing the script. Some of the code is below:

<div id="tickets">
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label>
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276">
    <option value=" ">-- Please select --</option>
    <option value="Member">Member</option>
    <option value="Member + 1 Guest">Member + 1 Guest</option>
    <option value="Member + 2 Guests">Member + 2 Guests</option>
    <option value="Member + 3 Guest">Member + 3 Guests</option>
</select>
</div>
<div id="payMethod">
<div class="header">
    PAYMENT METHOD
</div>
<div id="payOptions">
    <div id="payInfo">
        <div id="pay0" class="paymentinfo">
            <p>PAYMENT INFO OPTION 1</p>
        </div>
        <div id="pay1" class="paymentinfo">
            <p>PAYMENT INFO OPTION 2</p>
        </div>
        <div id="pay2" class="paymentinfo">
            <p>PAYMENT INFO OPTION 3</p>
        </div>
    </div>
</div>
</div>

If anyone could please assist, that would be greatly appreciated.

Solution 1

http://jsfiddle.net/bEuRh/5/

I'll get the value when select change is detected and compare..

EDIT:

$("select").change(function () {
    var str = "";
    str = parseInt($(this).val());

    $("#payMethod").toggle(str >= 2)
});

In HTML, i changed the value to integer...

        <option value="0">-- Please select --</option>
        <option value="1">Member</option>
        <option value="2">Member + 1 Guest</option>
        <option value="3">Member + 2 Guests</option>
        <option value="4">Member + 3 Guests</option>

if you wanna show individual div... you can try this one..

http://jsfiddle.net/bEuRh/6/

Solution 2

Here is a working example using pure JS:

//when a new option is selected...
document.getElementById('CAT_Custom_255276').addEventListener('change', function () {
    //hide all .paymentinfo
    Array.prototype.forEach.call(document.querySelectorAll('.paymentinfo'),  function (e) {
        e.style.display = 'none';
    });
    //get the selected index - 2 (first two do not impact display)
    var sel = +this.selectedIndex - 2;
    //if it is one of the last 3 selected...
    if (sel >= 0) {
        //display payMethod and the chosen individual options
        document.getElementById('payMethod').style.display = 'block';
        document.getElementById('pay' + sel).style.display = 'block';
    }
    else {
        //otherwise hide payMethod
        document.getElementById('payMethod').style.display = 'none';
    }
});

http://jsfiddle.net/bEuRh/4/

Solution 3

I like Raymond's approach of changing the HTML to:

    <option value="0">-- Please select --</option>
    <option value="1">Member</option>
    <option value="2">Member + 1 Guest</option>
    <option value="3">Member + 2 Guests</option>
    <option value="4">Member + 3 Guests</option>

Do that, and then use this jQuery to keep the payment div hidden unless they select the option for more than one member:

$('.cat_dropdown').change(function() {
    $('#payMethod').toggle($(this).val() >= 2);
});

I like this approach for several reasons:

1. it makes sense to give each option a value that corresponds to the meaning of the selection. For example, Member + 1 Guest has an associated value of 2.

2. it balances the code between the markup and the javascript in a meaningful, simpler way.

3. Instead of tons of javascript to worry about, you only have these three lines of jQuery to maintain.

Here's a jsfiddle to illustrate: http://jsfiddle.net/martco/3TvwV/4/

Comments

[HMR]

One thing though; if you select 1 guest and then 2 guests then it shows both 1 and 2 pay methods doesn't it?

[Explosion Pills]

@HMR I don't think so... it doesn't when I try it

[HMR]

Sorry, missed the Array.prototype.forEach.cal line that hides the divs.

[Marty Cortez]

i wouldn't use getElementById as the id provided, CAT_Custom_255276, seems like it could change regularly

[Marty Cortez]

i like the approach of using integers for values. you can tighten this up by using $('#payMethod').toggle(str >= 2) instead of your last five lines.

[Marty Cortez]

also you can say $(this).val() instead of $("select option:selected").val()

[Marty Cortez]

i wouldn't use getElementById as the id provided, CAT_Custom_255276, seems like it could change regularly

[Marty Cortez]

is he trying to toggle the appearance of pay2, etc? if not then you can use (sel >=0) ? 'block' : 'none' to help eliminate your last nine lines of code.

[Marty Cortez]

you don't need the first 4 lines inside your change callback. he's already setting the containing div to display: hidden in the CSS.

[HMR]

You're right, selecting by className would be better but without using a library it'll add tons of code to make it work in older browsers and IE

[Marty Cortez]

also i wouldn't assign the result of parseInt to a variable named str. maybe call it numGuests? :)

[Marty Cortez]

he already mentioned jQuery in the original question, so i'm guessing he's ok with using it. who knows.

[sampotts]

FYI - The CAT_Custom_xxxxx is the field ID provided by Business Catalyst when I created the form.

[HMR]

Updated so it's using selectors based on class name, doesn't work in IE7

[sampotts]

@ExplosionPills: That works but my bad, the 3 payment options should show for any selection other than "Member". I haven't explained it very clearly. The payMethod div should be hidden unless the ticket selection made is "Member +....", only then would payMethod show the 3 payment options (Credit Card, Direct Debit & Cash).

[sampotts]

@Raymond - Fiddle #5 is exactly the outcome I am looking for, thanks heaps.

[Explosion Pills]

@MartinCortez you need to hide the others when one is selected

[sampotts]

Now to put it all together within my form! :-)

[sampotts]

Thanks for this, nice and short & clean.

[sampotts]

@ExplosionPills If you take a look at (jsfiddle.net/martco/3TvwV/4) you will see that when you select a Member + x Guests, all 3 payment options are visible. There is not a different payment method for each Member + X Guests. Does that make sense?

[Explosion Pills]

@sampotts what about the example I have in my answer?

[sampotts]

@Raymond - Is there a way I can do this using the Alpha values I originally had rather than the 0-11 values? The only reason I ask is because the form that this goes to is managed by other staff so a value of 3 or 7 doesnt really mean anything to them, if I can use this method but show the options value as "Member + 3 Guests = $45", that makes it fool proof. Is this possible without making it too complicated?

[Raymond]

@sampotts, you wanna put values into "Member + 3 Guests" instead of 1, 2,3 ,4 ??

[sampotts]

@Raymond If I can yes please as those are the values that are sent in the email and are easily identifiable by the recipient as to how many tickets have been ordered/purchased. (ie: <option value="Member">Member</option>, <option value="Member + 1 Guest">Member + 1 Guest</option>, etc

[sampotts]

@Raymond I am looking for the "Value" to be printed on the email notification once it has been submitted, not an Alert or are you using this as an example and your code will do this if I remove the "alert" part? Sorry to be a pain.

[Raymond]

@sampotts, alert is for you to show the result. you can delete or modify any part you want.. you mean you wanna send the "value" to another page or form?

[sampotts]

@Raymond When the form is submitted, the results are sent to an email address within the company that is then used to write out the tickets for the event. The email displays the details submitted which is why I was looking for the "values" to be written in as Member or Member + xx Guestx, etc. At present, the email displays a "value" of 1, 2, 3, etc??

[Raymond]

@sampotts, then u input another hidden field in your form.. when form is submitted.. put the values into that hidden field.. then you can get the values.. cheers! :)