Change input text field value by radio checked using jquery

Question

I want to display total price with sum by values of subtotal and shipping cost, But my code can't get subtotal value on input text field.

Example :

Subtotal: 200
Shipping A: 100 (checked)
Shipping B: 200
Totalprice: 300

or

Subtotal: 200
Shipping A: 100 
Shipping B: 200 (checked)
Totalprice: 400

Here's my code on jsfiddle.

Put your code up in the question as some of the users can't access external services such as jsfiddle. — MarengoHue
– MarengoHue, Commented Feb 19, 2016 at 5:55
You might want to include the code in the question rather than a link to jsfiddle, it's much more useful for other users. See meta.stackexchange.com/questions/149890/… — akiraspeirs
– akiraspeirs, Commented Feb 19, 2016 at 5:56

Rayon · Accepted Answer · 2016-02-19 04:54:08Z

2

Use .val() to set value not .html()

Also note, $(".subtotal") will return jQuery wrapped object but we need value of that element hence Use parseInt($(".subtotal").val()) to get parsed value of that input field. Use .text() instead of .html() if you wish to get text value than html

Try this:

function updateCosts() {
  var totals = parseInt($(".subtotal").val());
  $.each($('#content input[type=radio]:checked'), function() {
    totals += parseInt($.trim($(this).next('.shippingcost').text()));
  });
  $('#totalPrice').val(totals);
}

$(document).ready(function() {
  $('#content input[type=radio]').change(updateCosts);
  //_____________________________^^^^^^^_^^^^^^^^^^^
  //Use change event instead of click, handler can be attached this way
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Subtotal:
<input type="text" value="200" name="subtotal" class="subtotal">
<div id="content">
  A:
  <input type="radio" name="shippingcost" checked> <span class="shippingcost"> 100 </span> B:
  <input type="radio" name="shippingcost"> <span class="shippingcost"> 200 </span>
</div>
Total price:
<input type="text" name="totalprice" id="totalPrice">

Fiddle here

edited Feb 19, 2016 at 4:54

answered Feb 19, 2016 at 4:47

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

3 Comments

Vintage Beef Over a year ago

Thank you so much, But it possible if I want to get value from value="200" code it will be like var totals = parseInt($("input=[value]").val()); right?

Rayon Over a year ago

Yes..But if it is the unique element then go with the id..$(#ID_SELECTOR).val()

Vintage Beef Over a year ago

Oh, Thank you so much, :)

Collectives™ on Stack Overflow

Change input text field value by radio checked using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related