javascript uncaught type error function ajax

Question

Below you can see two functions. The second works perfectly. It submits data when a select menu has been changed.

I am trying to apply a similar logic but this time to a field. When the value in the field as changed I want to the data to submit, as seen in the first bit of js

Despite the logic being almost the same I get this error

Uncaught ReferenceError: $ is not defined
9452:382 (anonymous function)

If someone could illuminate to me what exactly this and how I fix it I'd be very grateful. My assumption is that its something related to the order in which things load, however as the logic is no different from the old logic surely this shouldnt be a problem.

 :javascript

    $('#booking_package_#{package.id}').on("keyup change", function(){
      var bookingPackageQuantity = document.getElementById("menu_item_#{package.id}");
      $.ajax({
        url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+bookingPackageQuantity,
        type: "GET"
      })
    });


    $('#menu_item_#{package.id}').on("change", function(){
      var selects = document.getElementById("menu_item_#{package.id}");
      var menuItemId = selects.options[selects.selectedIndex].value
      $.ajax({
        url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+menuItemId,
        type: "GET"
      })
    });

I am trying to bind the event to this field

    = number_field_tag 'quantity', booking.find_package(package).quantity, id: "booking_package_#{package.id}"

Answer 1

In the first part of the JS, please put value. Probably that may be breaking the javascript, please try the following edited code...

 $('#booking_package_#{package.id}').on("keyup change", function(){
  var bookingPackageQuantity = document.getElementById("menu_item_#{package.id}");
  $.ajax({
    url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+bookingPackageQuantity.value,
    type: "GET"
  })
});

Can you please let me know if you are using any frameworks for this? so that i can help you better...