Echo text in div from formula created with select fields using jquery

Question

I have a rate calculator on my site with a simple set of selects that looks like this:

<select name="room">
              <option value="Green">Green Room</option>
              <option value="Red">Red Room</option>
              <option value="Blue">Blue Room</option>
              <option value="Orange">Orange Room</option>
              <option value="Yellow">Yellow Room</option>
            </select></td>
            <td>
            and I rehearse 
            </td>
            <td>
            <select name="rehearsals">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
            </select>
            </td>
            <td>
            time per week for 
            </td>
            <td>
            <select name="hours">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
            </select>

And I have a jquery script that looks like this:

<script>
    function displayVals() {
      var rehearsals = $("#rehearsals").val();
  var room = $("#room").val();
  var hours = $("#hours").val();

  var totalhours = (rehearsals * hours * 4);

    $("#rate-calculator").html("We recommend the " + room);

    if (totalhours <= 8) {
        $("#rate-calculator").html(" Bronze package each month.");
  }

    if (totalhours <= 16 && totalhours > 8) {
        $("#rate-calculator").html(" Silver package each month.");
  }

    if (totalhours <= 24 && totalhours > 16) {
        $("#rate-calculator").html(" Gold package each month.");
  }

    if (totalhours <= 42 && totalhours > 24) {
        $("#rate-calculator").html(" Diamond package each month.");
  }

  }

  $("select").change( displayVals );
  displayVals();

  </script>

However it is not working, I get this as a result:

We recommend the undefined

I have tried everything I can think of, nothing seems to work. I'm happy it's at least printing some text, but it looks to me like the problem is that the select values are not being passed for some reason I cannot identify. Is is a problem if my javascript sits in the div that it is supposed to be printing text in?

Answer 1

As per your request, here is an example:

As I said in the comment, your selectors are all searching for elements by ID, for example #rehearsals . But, you don't have any id attributes on your elements, you only have name attributes, which is a completely different thing.

Simply replace your name attributes in the HTML with id instead, like so:

<select id="rehearsal"> ...

Do the same for the other select elements.

Since you mentioned you're new to some of this, I'll warn you (in case you weren't aware already) that id attributes must be unique, otherwise you will encounter some unexpected behaviour.

Alternatively, if you really want to use the name attribute, you can use the general attribute selector in jQuery, like so:

$("[name='rehearsals'")

Note that a selection of this type might be much slower as ID searching is highly optimized.