Run jQuery Coffeescript on input change

Question

I have a jQuery Coffeescript function that runs on page load. The functions grabs a table row then it's price, quantity and discounts and processes the values to determine a total for the row.

I currently run the function on page load but would also like it to run anytime that the form input values change. Please Note, this form is used on a rails f.fields_for which generates multiple forms and also additional dynamically generated forms.

What would be the most DRY way to do this?

$('tr.order-item').each ->
  q = $(this).find('.quantity_input')
    .val()
  quantity = parseInt(q)
  p = $(this).find('.price').text().replace("$", "")
  price = parseFloat(p.replace(/,/g, ''), 10)
  d = $(this).find('.discount_input').val()
  discount = parseFloat(d)
  total = price * quantity - discount
  total_price = "$"+ parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString()
  $(this).find('.item-total').text(total_price)

form_for fields

<tr class="order-item">
<td>
    <div class="btn-group">
        <button type="button" class="btn-u dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-angle-down"></i>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
            </li>
            <%= f.hidden_field :_destroy %>
            <%= link_to "Remove Item", '#', class: "remove_fields btn btn-link" %>
            <li><button class="btn btn-link">Add Custom Item</button></li>
            <li><button class="btn btn-link">Remove Item</button></li>
        </ul>
    </div>
</td>
<td>
    <h5 class="product"><%= f.object.product.name %></h5>
    <%= f.hidden_field :product_id, class:"product-id" %>
    <%= f.hidden_field :id, class:"id" %>
</td>
<td>
    <h5 class="text-right"><span style="color: green" class="price"><%= number_to_currency f.object.unit_price %></span></h5>
</td>
<td>
    <%= f.number_field :quantity, min: 1, hide_label: true, class:"quantity_input" %>
</td>
<td>
    <%= f.text_field :discount, hide_label: true, class:"discount_input" %>
</td>
<td>
    <h5 class="text-right"><span style="color: green" class="item-total"></span></h5>
</td>

The F · Accepted Answer · 2016-06-15 04:54:03Z

1

An approach would be to listen for the keyup event in any input field and then update the values:

updateOrderItems = ->
  $(document).find('tr.order-item').each ->
    q = $(this).find('.quantity_input').val()
    quantity = parseInt(q)
    p = $(this).find('.price_value').text()
    price = parseFloat(p)
    d = $(this).find('.discount_input').val()
    discount = parseFloat(d)
    total_price = price * quantity - discount
    $(this).find('.item-total').text("$"+ parseFloat(total_price).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString())

updateOrderItems()
$(document).on 'keyup', 'tr.order-item input', updateOrderItems

Passing the selector to .on() will fix your ajax issue.

To run your code on page load as well as on keyup

Declare a function, run it on page load, as well as on your keyup event.

As an alternative you might want to give your users the possibility to update the information that is displayed, by triggering your code upon a click on a button.

edited Jun 15, 2016 at 4:54

answered Jun 14, 2016 at 17:19

The F

3,7341 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Juan Pablo Ugas Over a year ago

I'd like to have it listen for an .on 'change' event, that way theres no need to listen for a key up. Would the key up work on rows that havent been changed?

The F Over a year ago

Then maybe replace the comma with a '.' as parseFloat(2,4) will not work as you expect it to

The F Over a year ago

can you think of why this happens? Try readding your $(document).find(...). I'll update the answer.

The F Over a year ago

'breaking' is really not helpful ;) Maybe you need to rethink your initial approach. Any peers you could ask for help? I have updated the answer but your code is far from clean

Cheezmeister Over a year ago

To mop up that last bit of moisture, get rid of the lambda. $(document).on 'keyup', 'tr.order-item input', updateOrderItems

|

Collectives™ on Stack Overflow

Run jQuery Coffeescript on input change

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related