Update input field with jQuery when .text(); changes

Question

I am integrating a jQuery pricing calculator with a shopping cart. I want to update a hidden field when the .text(); value of an element is changed.

This is the field that I am trying to update:

<input id="firewall-price" type="hidden" name="price" value="" />

from here:

<div class="orderRow server firewall" contain="firewall" id="">
   <div class="quantity"><span></span></div>
   <div class="name">Firewall</div>
   <div class="price orderPrice">$0</div>
</div>

using this jQuery:

$(document).ready(function(){
   var price = $( ".firewall .price" ).text().substr(1);

   $(price).change(function(){
      $("input[name=firewall-price]").val(price);
   });
});

I can't get the value of the input[name=firewall-price] to update when the number is changed. I know it is a little strange doing it this way but I want to just take the final values from the calculator and send them to the shopping cart.

Here is a link to the dev site: http://mindcentric.thelabelcreative.com/pricing_calculator/

$(price) is a selector that finds an element whose tag name is the text content of the .price field. You can't bind an event handler to a string itself, only to DOM elements. — Barmar
– Barmar, Commented May 8, 2014 at 1:28

sahbeewah · Accepted Answer · 2014-05-08 01:28:37Z

1

You can't put a change event on a div, let alone a string. What you're describing is a MutationEvent and is considered bad practice (and is no longer supported). You can read about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

Instead, you need to hook onto the events/actions that change the value of that div.

answered May 8, 2014 at 1:28

sahbeewah

2,6901 gold badge15 silver badges18 bronze badges

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

Comments

Stuart · Accepted Answer · 2014-05-08 01:25:15Z

0

Try replacing:

$("input[name=firewall-price]").val(price);

With

$("#firewall-price").val(price);

answered May 8, 2014 at 1:25

Stuart

6891 gold badge12 silver badges35 bronze badges

Comments

user3373870 · Accepted Answer · 2014-05-08 01:37:40Z

0

Juan's answer is correct, I will just let you know why.

<input id="firewall-price" type="hidden" name="price" value="" />

doesn't have a name attribute which is what you are asking jQuery to select your element by.

To have your code work without changing your jQuery call, just add the name attribute to input field. In html, the name attribute is used to associated key/value pair when the element is submitted to the server.

answered May 8, 2014 at 1:37

user3373870

1,4962 gold badges13 silver badges18 bronze badges

Comments

James L. · Accepted Answer · 2014-05-08 01:45:42Z

0

Sahbeewah is correct about change events on a div. If you are able to edit the contents of your main.js file, I would recommend adding your logic in the lastPrice function. After line 451 add

$('#firewall-price').val(correctPrice);

or

$('#firewall-price').val(str);

correctPrice is unformatted and str has the dollar sign and a comma.

answered May 8, 2014 at 1:45

James L.

4,0871 gold badge17 silver badges15 bronze badges

1 Comment

user3614447 Over a year ago

I do have access to the main.js file and this is definitely what I need to do. The problem is that I want to pass each item into the cart as a separate product and the lastPrice function is calculating the total price of the entire transaction.

Hailwood · Accepted Answer · 2014-05-08 01:59:27Z

0

As some of the answers have said you cannot bind a change event onto a text value.

You can however bind a change event into an input, so you need to reverse your logic, instead of updating the $( ".firewall .price" ).text() instead update the input, bind a change event onto the input $('#firewall-price') and set the text() of the .price element based off that.

$(document).ready(function(){
   var $priceTextElement = $( ".firewall .price" );
   var $priceTextInput = $('#firewall-price');

   $priceTextInput.on('change', function(){
      $priceTextElement.text('$'+$priceTextInput.val());
   });
});

answered May 8, 2014 at 1:59

Hailwood

93.1k112 gold badges275 silver badges425 bronze badges

Collectives™ on Stack Overflow

Update input field with jQuery when .text(); changes

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related