Show Data Based on What User Choose

I have a form and on the form I would like a certain fee displayed depend on what the user choose.

So for example:

If they choose category 1 the fee that displays is $200
If they choose category 2 the fee that displays is $400
etc...

Is there a tutorial somewhere on how I can get this done?

Thank you!

Hi LikeStuff,

You can do this with JavaScript - there's an example in this FAQ but it's probably more complicaed than you need.

Bob

Hi GreyHead,

Am I going about this the right way?

I am using a dropdown and I added the options in the dropdown. I created a text box to display the fee amount.

The dropdown name is: bed-options
The textbox name is: bed-fee

I'm not sure how to edit this code to get it to work:

jQuery(document).ready(function (jQ) {
  jQ('#form-row-serial_no').hide();
  jQ('#product_list').change(function () {
    var opt;
    opt = jQ(this).find(':selected').data('serial').toString();
    if (opt.length > 0) {
      jQ('#serial_no').val(opt);
      jQ('#form-row-serial_no').show();
    } else {
      jQ('#serial_no').val('');
      jQ('#form-row-serial_no').hide();
    }
  });
});

Thank you!

Hi LikeStuff,

Where have you put the fee data?

Bob

Hi Greyhead,

The fee data is in a drop down like this:

Category 1=Category 1 - $232
Category 2=Category 2 - $388
Category 3=Category 3 - $594
Category 4=Category 5 - $802
Category 5=Category 5 - $905

Thank you!

Hi LikeStuff,

You'll see in the FAQ that the data was added as a data- attribute to each of the options. You haven't done that. That is probably still the simplest solution. The JavaScript would go into a Load JavaScript action in the form On Load event.

Another solution would to change the values of the options

Category 1#232=Category 1 - $232
Category 2#388=Category 2 - $388
Category 3#594=Category 3 - $594
Category 4#802=Category 5 - $802
Category 5#905=Category 5 - $905

and then use custom JavaScript to pull the price out of the value when the drop-down changes.

Bob