Need help showing course fees dynamically based on selection in a student sign-up form

Courses
1

I’m working on a project for new students to sign up for courses. I want the fees to show up right away when they pick a course. I tried some jQuery but it’s not doing what I want. Here’s what I’ve got so far:

$(document).ready(function() {
  $('#program-choice').change(function() {
    if ($(this).val() === 'Data Management') {
      $('#cost-display').text('$1,500');
    }
  });
});

<label>Choose Program:</label>
<select id='program-choice'>
  <option>Coding Basics</option>
  <option>Data Management</option>
  <option>Web Design</option>
  <option>IT Fundamentals</option>
</select>

<p>Program Cost: <span id='cost-display'></span></p>

Can someone help me figure out what I’m doing wrong? I want it to show different prices for each course option. Thanks!

2

I’ve encountered a similar issue before, and I can offer a slightly different approach that might be helpful. Instead of using an object, you could create a data attribute in your HTML for each option. This method can be particularly useful if you need to store multiple pieces of information for each course.

Here’s how you could modify your HTML:

<select id='program-choice'>
  <option data-fee='800'>Coding Basics</option>
  <option data-fee='1500'>Data Management</option>
  <option data-fee='1200'>Web Design</option>
  <option data-fee='1000'>IT Fundamentals</option>
</select>

Then, you can update your jQuery like this:

$('#program-choice').change(function() {
  var fee = $(this).find(':selected').data('fee');
  $('#cost-display').text('$' + fee);
});

This approach allows you to easily add more data attributes in the future if needed, such as course duration or start dates, without changing your JavaScript logic. It’s also quite performant as it doesn’t require object lookups.

3

Hey there! I’ve been messing around with dynamic forms lately too, and I think I might have a solution for you. :blush:

Have you thought about using an object to store all your course fees? Something like this:

const courseFees = {
  'Coding Basics': '$800',
  'Data Management': '$1500',
  'Web Design': '$1200',
  'IT Fundamentals': '$1000'
};

Then you could just update your jQuery to use this object:

$('#program-choice').change(function() {
  const selectedCourse = $(this).val();
  $('#cost-display').text(courseFees[selectedCourse] || 'Price not available');
});

This way, it’s super easy to add new courses or change prices without touching the main logic. Plus, it’ll work for all your courses, not just Data Management.

What do you think? Have you tried something like this before? I’m curious to hear if you’ve found any other cool ways to handle dynamic form stuff!

4

yo, i’ve got a quick fix for ya! instead of checkin each course, use an object like this:

let fees = {
  'Coding Basics': '$800',
  'Data Management': '$1500',
  'Web Design': '$1200',
  'IT Fundamentals': '$1000'
};

$('#program-choice').change(function() {
  $('#cost-display').text(fees[$(this).val()] || 'Price not set');
});

this’ll work for all courses. give it a shot!