Change Price In Pricing Table With Select Element

[Mark_Haberstock]

Hi, I have a pricing table where each option has a select field that allows them to select their monthly credits. This needs to change the price. How can I achieve this? I assume its through interactions or custom states but I’m having trouble locating a resource that can walk me through it.

Heres a look at the table for reference:

[memetican (Michael Wells)]

You’d accomplish that with custom script. Are you only changing the price per month that appears above? If so it’s pretty simple.

• Give your combobox a custom attribute - price-sel, set the value to starter for the Starter one, pro for the Pro plan, etc.
• For the value for each element, give the price you want to display. So e.g. if 40,000 Word Limit / month is $29, you’d set the value of that option to $29.
• To the text element where you want that price to appear, add a custom attribute - price-display,a nd set the value to starter or pro.

Now you’ve clearly identifier what changes what where.

Add this script to do the job, in your /body custom code area;

<script>
$(function() {
  $("[price-sel]").change(function() {
    const priceType = $(this).attr("price-sel");
    $(`[price-display="${priceType}"]`).text($(this).val());
  });
})
</script>

Note I’ve just written this out, untested. Let me know if I glitched anything.

[Mark_Haberstock]

Thanks! I really appreciate you taking the time to write that out for me. It works perfectly.